我正在尝试在 SVG 中渲染一个标记 - 它应该是一个面向线的开放箭头。标记被截断(可能是因为路径以 x 轴为中心)。如何扩展标记视图区域以显示整个标记?
测试 SVG 文件是: http ://www.robmunro.net/misc/arrows.svg
正确的输出应该是: http ://www.robmunro.net/misc/arrows.png
我正在尝试在 SVG 中渲染一个标记 - 它应该是一个面向线的开放箭头。标记被截断(可能是因为路径以 x 轴为中心)。如何扩展标记视图区域以显示整个标记?
测试 SVG 文件是: http ://www.robmunro.net/misc/arrows.svg
正确的输出应该是: http ://www.robmunro.net/misc/arrows.png
您可以overflow:visible
在标记元素上进行设置,默认情况下它会剪辑到标记图块的边界。然后对标记进行必要的调整以获得所需的对齐方式等。供您参考,制作一个覆盖标记图块的完整边界的半透明矩形可能会有所帮助,这样当您在它之外时可以清楚地看到。
你的marker的坐标是(15,-15), (0,15), (-15,-15),但是只有marker只画在框(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>
您可以viewBox
在具有负原点的标记上设置属性。这使您可以避免调整标记形状本身的坐标。和点需要移动refX
,refY
因为它们是相对于 的左上角的viewBox
。