SVG 标记渲染视图框
我正在尝试获取一个标记以在 SVG 中渲染 - 它应该是一个面向线条的开放箭头。标记被截断（可能是因为路径以 x 轴为中心）。如何扩展标记视图区域以便显示整个标记？
测试SVG文件为： http://www.robmunro.net/misc/arrows.svg
正确的输出应该是： http://www.robmunro.net/misc/arrows.png
I am trying to get a marker to render in SVG - it should be a open arrow facing into the line. The marker is cutoff (possibly because the path is centred on the x-axis). how do i extend the marker view area so that the whole marker shows?
The test SVG file is:
http://www.robmunro.net/misc/arrows.svg
The correct output should be:
http://www.robmunro.net/misc/arrows.png
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
您可以在标记元素上设置
overflow:visible，默认情况下它会剪辑到标记图块的边界。然后对标记进行必要的调整以获得所需的对齐方式等。作为参考，制作一个半透明的矩形来覆盖标记图块的整个边界可能会有所帮助，以便您可以清楚地看到何时位于其外部。You can set
overflow:visibleon the marker element, by default it clips to the bounds of the marker tile. Then make the necessary adjustments to the marker to get the alignment you want etc. For your reference it may help to make a semi-transparent rectangle that covers the full bounds of the marker tile so that you can clearly see when you are outside it.你的标记的坐标是(15,-15),(0,15),(-15,-15)，但只有标记只在(0,0)到(markerWidth,markerHeight)的框中绘制。如果您重新绘制标记，使其只有正值（带有一点边框），您可以看到您的标记：
并确保标记大小足够大：
然后您可以使用 refX 确保它位于线上，并且reY 属性：
总的来说应该是：
The coordinates of your marker are (15,-15), (0,15), (-15,-15), but only the marker is only drawn in the box (0,0) to (markerWidth, markerHeight). You can see your marker if you redraw it such that it has only positive values (with a bit of a border):
And make sure the marker size is big enough:
Then you can make sure it sits on the line by using the refX and reY attributes:
All together it should be:
您可以在具有负原点的标记上设置
viewBox属性。这使您可以避免调整标记形状本身的坐标。refX和refY点需要移动，因为它们相对于viewBox的左上角。You can set a
viewBoxattribute on the marker with a negative origin point. This allows you avoid adjusting the coordinates of the marker shape(s) itself. TherefXandrefYpoint need to be shifted since they are relative to the upper left corner of theviewBox.