Question

我正在尝试在SVG中渲染一个标记 - 它应该是一个面向该行的空心箭头。标记是截止的（可能是因为路径以x轴为中心）。如何扩展标记视图区域以便整个标记显示？

测试SVG文件是： http://www.robmunro.net/misc/arrows.svg

正确的输出应该是： http://www.robmunro.net/misc/arrows.png

Answer 1

您可以在标记元素上设置overflow:visible，默认情况下会剪切到标记图块的边界。然后对标记进行必要的调整以获得所需的对齐等。作为参考，可能有助于制作一个半透明的矩形，覆盖标记拼贴的整个边界，以便您可以清楚地看到它在外面的时间。

Answer 2

标记的坐标为（15，-15），（0,15），（ - 15，-15），但只有标记仅在框（0,0）中绘制到（markerWidth，markerHeight））。如果您重绘它，您可以看到它的标记，使其只有正值（带有一点边框）：

<path d="M5,5 L20,20 5,35" />

确保标记尺寸足够大：

markerWidth="25" markerHeight="40"

然后，您可以使用refX和reY属性确保它位于该行上：

refX="20" refY="20"

所有这一切应该是：

<marker id="stip_1163554992"  markerUnits="strokeWidth" orient="auto" refX="20" refY="20" markerWidth="25" markerHeight="40"  style="stroke:#ffff00;stroke-width:5.0px;stroke-opacity:1.0;stroke-linecap:round;stroke-linejoin:round;fill:none;">
  <path d="M5,5 L20,20 5,35" />
</marker>

Answer 3

您可以使用负原点在标记上设置viewBox属性。这样可以避免调整标记形状本身的坐标。需要移动refX和refY点，因为它们相对于viewBox的左上角。

SVG标记渲染视图框

3 个答案: