SVG标记：防止继承其形状比例答案

【问题标题】：SVG marker: prevent inheritance its shape scaleSVG标记：防止继承其形状比例
【发布时间】：2013-03-04 16:32:37
【问题描述】：

我需要 SVG 中的可扩展架构。但有些元素（如箭头）在架构上的大小应相同，而不管架构的规模如何。
我正在通过SVG transform attribute 和箭头通过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 进行架构缩放。在这种情况下，形状的坐标将在模式比例更新后手动重新计算。实际上，这看起来不太好。

【问题讨论】：

听起来你应该提交一些错误报告。
是的，它可能会。但是，不幸的是，在为特定形状实例化带有markerUnits="strokeWidth" 的标记时，我在W3C Recommendation 中找不到任何指定形状的vector-effect="non-scaling-stroke" 应该（或不应该）被考虑的内容。这是某种未指明的行为吗？
您找到解决方案了吗？我遇到了同样的问题。我可能会继续使用变换，然后对我想要保持的形状应用逆变换，这至少意味着 SVG 中的位置单位将是我想要的......但如果有的话会很好一种在本地拥有非缩放标记的方法。
@pancake。不，我没有。我使用与您描述的相同的解决方案：marker_scale = 1/schema_scale。

标签： svg

【解决方案1】：

来自here：

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

例如：

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

【讨论】：

不幸的是它没有帮助