4

我需要 SVG 中的可扩展架构。但是有些元素，比如箭头，应该在模式上具有相同的大小，而不管模式的规模如何。
我正在通过SVG 转换属性和通过SVG 标记的箭头实现模式可扩展性。
但我遇到了麻烦：当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模式缩放。在这种情况下，将在模式比例更新后手动重新计算形状的坐标。这看起来不太好，实际上。

4

1 回答 1

0

从这里：

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

例如：

<marker id="myMarker" markerUnits="userSpaceOnUse">
  ...
</marker>
于 2020-07-17T02:50:06.293 回答