按比例禁用 SVG 自动缩放

Posted 2023-02-22

【中文标题】按比例禁用 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>