如何清除d3.zoom事件设置的缩放比例

Posted 2023-05-15

参考技术A Zoom属性是IE浏览器的专有属性，Firefox等浏览器不支持。它可以设置或检索对象的缩放比例。除此之外，它还有其他一些小作用，比如触发ie的hasLayout属性，清除浮动、清除margin的重叠等。<>Zoom的使用方法：<>zo:? normalnumber<>normal :默认值。使用对象的实际尺寸<>number :百分数无符号浮点实数。浮点实数值为1.0或百分数为100%时相当于此属性的 normal 值 用白话讲解就是zoom:后面的数字即放大的倍数，可以是数值，也可以是百分比。如：zoo，zoo20%。 而这个属性只要在IE中才起作用，所以很少用到它的实际用途，而最经常用到作用是清除浮动等，如：<>.border<>border:1px solidCC;<>padding:;<>overflow:hidden;<>_zoom:><>_zoom是CSS ha凶ǘ訧E6起作用的部分。IE6浏览器会执行zoo表示对象的缩放比例，但这里<>overflow:hidden;和_zoo;是连起来用的，作用是清除border内部浮动。<>同理，还可以使用同样方法清除margin属性在IE浏览器中的重叠问题。<>

按比例禁用 SVG 自动缩放

【中文标题】按比例禁用 SVG 自动缩放

【英文标题】：Disable SVG autoscaling proportionally

【发布时间】：2014-10-29 11:39:09

【问题描述】：

我使用$(window).resize() 事件来调整我使用 D3 生成的 SVG 图表的大小。我计算父元素的宽度并将 SVG 元素宽度设置为等于它并始终保持高度相同，因此图表的宽度会发生变化，但高度会保持不变。 我注意到 SVG 元素的实际大小与 width 和 height 属性中设置的大小不同。如果屏幕很宽，这会使一些内容隐藏在底部，如果屏幕很窄，则显示它。

如何使 SVG 的大小与我在属性中设置的大小相同以使比例精确？

更新：在任何 SVG 图像上都可以看到相同的行为，例如 http://www.svgopen.org/2003/papers/WhyCompileSvg/myButterfly.png，当您调整窗口大小时，它会使图像按比例调整大小。我想禁用此行为，因为我明确设置了宽度和高度属性。

【问题讨论】：

不包含视图框

我没有viewbox，只有宽度和高度属性

除非您添加视图框，否则 SVG 不会自动缩放。见codepen.io

确保 SVG 有 css display: block;

似乎问题不在于 SVG 本身，而在于其父 div 具有 overflow:hidden; 并剪切内容。我已将其高度设置为 100%，现在可以正常工作了。

【参考方案1】：

在 svg 中使用 preserveAspectRatio='none'

例子：

.delimiter

    height: 15px;
    width: 7px;
    display: inline-block;
    vertical-align: middle;
    background: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' width='3' height='15' fill='black' viewBox='0 0 270 270' xmlns='http://www.w3.org/2000/svg' %3E%3Cg%3E%3Cpath d='m120 0h30v30h-30v-30z'/%3E%3Cpath d='m120 60h30v30h-30v-30z'/%3E%3Cpath d='m120 120h30v30h-30v-30z'/%3E%3Cpath d='m120 180h30v30h-30v-30z'/%3E%3Cpath d='m120 240h30v30h-30v-30z'/%3E%3C/g%3E%3C/svg %3E") no-repeat center center;

<div>
Item1 <div class='delimiter'></div> Item2
</div>