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