Question

此示例在一个大小为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，所以它不会影响调整大小。

Answer 1

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

<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>

Answer 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>

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

如何使svg中的元素不被viewbox拉伸？

2 个答案: