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

此示例在一个大小为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 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的效果。可以使用“百分比值”将形状节点放置在相对位置，但此技术对于常规路径形状不有用。因为，我使用“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>

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

vector effect=“非缩放宽度和笔划”

？当svg的宽度和高度改变时，rect的大小会被缩放。UA没有实现任何其他矢量效果。