SVG标记：防止继承其形状缩放

Question

我需要一个可扩展的SVG模式。但是某些元素（如箭头）应该在模式上保持相同的大小，而不管模式的缩放比例。
我通过SVG transform属性实现了模式可扩展性和SVG markers中的箭头。
但我遇到了问题：当将transform=scale(s)应用于形状时，它们的标记也会被缩放。

在SVG中是否有一种方法可以将标记应用于缩放后的形状，以便标记不根据形状的变换而缩放？
或者我的方法是错误的？

查看示例：

<svg id="svg-root" class="drawing" width="100%" height="500" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <marker id="myMarker" refX="6" refY="6" markerWidth="12" markerHeight="12" stroke-width="1" stroke="blue" orient="auto" fill="none" markerUnits="strokeWidth">
            <circle cx="6" cy="6" r="5" />
        </marker>
    </defs>
    <g transform="scale(2)">
        <line id="line1" x1="20" y1="50" x2="200" y2="50" stroke="green" stroke-width="1" marker-start="url(#myMarker)" vector-effect="non-scaling-stroke"/>
    </g>
    <g transform="scale(3)">
        <line id="line2" x1="20" y1="50" x2="200" y2="50" stroke="green" stroke-width="1" marker-start="url(#myMarker)" vector-effect="non-scaling-stroke"/>
    </g>
</svg>

两条线，line1 和 line2 都应该有半径为"6"的圆和描边宽度为"1"的圆形。
目前的半径分别是"12"和"18"。相应的宽度为"2"和"3"，这不合适。

我正在尝试将vector-effect="non-scaling-stroke"应用于形状。然后形状的描边宽度不会缩放。并且我正在将markerUnits="strokeWidth"应用于标记。
但这并没有起到帮助作用。

我能想到的唯一解决方法是停止使用transform进行模式缩放。在这种情况下，形状的坐标需要在模式缩放更新后手动重新计算。实际上这看起来不太好。

- Alexander Stepaniuk

---

听起来你应该提交几个错误报告。 - Erik Dahlström

是的，它可能确实如此。但不幸的是，在W3C推荐中，我找不到任何指定当具有vector-effect="non-scaling-stroke"属性的形状与使用markerUnits="strokeWidth"属性的标记器相结合时应该（或不应该）考虑的内容。这是某种未指定的行为吗？ - Alexander Stepaniuk

你解决了这个问题吗？我也遇到了同样的问题。我可能会继续使用变换，然后对我想要保留的形状应用反向变换，这至少意味着SVG中的位置单位将是我想要的...但如果有一种本地方式可以实现非缩放标记就更好了。 - pancake

@pancake。不，我没有。我使用了你描述的相同解决方案：marker_scale = 1/schema_scale。 - Alexander Stepaniuk

Answer 1

从这里：

为了避免标记自动缩放以适应使用它的路径的描边宽度，请将markerUnits属性设置为userSpaceOnUse。这样，标记将保持其大小，无论使用它的路径的描边宽度如何。

例如：

<marker id="myMarker" markerUnits="userSpaceOnUse">
  ...
</marker>

- Harry Stevens

---

不幸的是，它没有帮助。 - Alexander Stepaniuk