如何使 svg 中的元素不被视图框拉伸？答案

【问题标题】：How to make element in svg not stretched by viewbox?如何使 svg 中的元素不被视图框拉伸？
【发布时间】：2017-02-17 09:55:40
【问题描述】：

这个例子在一个 10 x 10 的盒子里画了两个圆。

<svg width="10" height="10" viewbox="0 0 10 10">
    <circle cx="2" cy="2" r="2" fill="purple" /> <!-- circle A-->
    <circle cx="4" cy="4" r="2" fill="purple" /> <!-- circle B-->
</svg>

圆 A 的大小与圆 B 的大小相同。假设我想将 svg 的大小调整为 100 x 100，如下所示：

<svg width="100" height="100" viewbox="0 0 10 10">
    <circle cx="2" cy="2" r="2" fill="purple" /> <!-- circle A-->
    <circle cx="4" cy="4" r="2" fill="purple" /> <!-- circle B-->
</svg>

圆圈的大小将调整大小。如何在 svg 中制作特定元素，我们只说圆形 A，所以它不受调整大小的影响。

【问题讨论】：

使用两个 svg 元素，其中一个没有 viewBox。使用 CSS 定位将它们放在一起。
@RobertLongson 我可以使用这个解决方案，但它需要根据 svg 的宽度和高度来调整我的 cx 和 cy 对象的大小，不是吗？有更好的解决方案吗？因为我的实际代码很复杂
我不知道你的第一句话是什么意思。
我的对象有固定坐标。当我改变整体尺寸时，我只需设置宽度和高度。您的解决方案似乎需要许多属性来更改以调整大小。如果我错了，请给我示例作为评论，我将不胜感激。

标签： svg

【解决方案1】：

我制作了另一个样本。我使用嵌套的 svg 元素来分割 viewBox 的效果。您可以使用百分比值放置形状节点的相对位置，但这种技术对于一般路径形状没有用处。因为，我使用“使用”元素来分割形状定义和定位。

<svg width="100" height="100">
    <defs>
        <!--shape definition-->
        <circle r="2" fill="red" id="circleA"/> <!-- circle A-->
    </defs>
    <!--parcentage positioning by viewport-->
    <use x="20%" y="20%" xlink:href="#circleA"/>
    <svg viewBox="0 0 10 10">
        <circle cx="4" cy="4" r="2" fill="purple" /> <!-- circle B-->
    </svg>
</svg>

【讨论】：

【解决方案2】：

你的意思是这样吗？

<svg width="100" height="100" viewbox="0 0 10 10">
    <rect x="2" y="2" width="0.001" height="0.001" 
        stroke="red" stroke-width="4" stroke-linejoin="round" 
        vector-effect="non-scaling-stroke"/> <!-- circle A-->
    <circle cx="4" cy="4" r="2" fill="purple" /> <!-- circle B-->
</svg>

但我不知道每个浏览器都支持矢量效果属性。

【讨论】：

有vector-effect="non-scaling-width-and-stroke"之类的属性吗？当 svg 的宽度和高度发生变化时，矩形的大小会被缩放。
没有 UA 实现了任何其他矢量效果。