我有一个定义了宽度和高度的 SVG 元素，比如 <svg width="100px" height="100px"></svg> , 充满了各种元素。
我想要一种“缩放”功能，其中 SVG 的特定区域被放大以填充整个 SVG 元素。
我计划用 scale 来做到这一点和 translate属性，即通过应用 scale(x)到 SVG 元素，然后计算我需要翻译的内容，以使所需区域保持可见。
我预计这将使 SVG 保持在 100x100 像素并简单地隐藏该区域之外的任何元素。但是，这不会发生；整个 SVG 元素反而变大了，即使尺寸被明确定义为属性。
显然我误解了缩放和 SVG 尺寸的工作方式，有谁知道我如何才能实现我在这里尝试做的事情？
最佳答案
您可以使用 div 元素扭曲 svg 并使用 overflow: hidden。
<div style="width: 300px; height: 300px; overflow: hidden">
<svg width="100" height="100" style="transform: scale(4);">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</div>
关于javascript - 缩放覆盖 SVG 宽度和高度属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45549110/