Question

我需要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进行架构扩展。在这种情况下，在更新架构比例后，将手动重新计算形状的坐标。实际上，这看起来不太好。

Answer 1

来自here：

要避免使用标记自动缩放标记以适合路径的笔触宽度，请将markerUnits属性设置为userSpaceOnUse。这样，标记将保持其大小，而与使用它的路径的笔划宽度无关。

例如：

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

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

1 个答案: