Question

我正在使用＆＃34;标记结束＆＃34;绘制SVG行。使它成为一个箭头。它绘制的箭头延伸到线的末端，使整个箭头更长，但我希望整个箭头与原始线的长度相同。也就是说，箭头的尖端应位于线的端点。我怎么做？

缩短线以适应箭头的大小不会真正起作用。箭头的大小取决于线条的粗细（这是好的），但我不知道厚度，因为它可以在已经写入SVG文档的样式元素中指定。

在这个例子中，我希望箭头完全位于方形内部，其尖端位于方形角落，而不是伸出方形。

＆＃13;

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<g><marker id="arrowhead0" viewBox="0 0 60 60" refX="0" refY="30" markerUnits="strokeWidth" markerWidth="8" markerHeight="10" orient="auto">
            <path d="M 0 0 L 60 30 L 0 60 z" fill="#800000" /> </marker>
<line marker-end="url(#arrowhead0)" x1="1" y1="1" x2="100" y2="100" stroke="#800000" />
<rect x="1" y="1" width="100" height="100" stroke="green" fill="none"/>
</g></svg>

＆＃13;

Answer 1

将refX属性设置为60（我认为可能是指向右侧时箭头的宽度）似乎可以解决此问题。缩放宽度似乎很好，不确定其他属性。

我不是SVG专家，只是觉得这很有意思并且玩弄了这些属性，直到我偶然发现了这个解决方案，所以带上一点点盐。

＆＃13;

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<g><marker id="arrowhead0" viewBox="0 0 60 60" refX="0" refY="30" markerUnits="strokeWidth" markerWidth="8" markerHeight="10" orient="auto">
        <path d="M 0 0 L 60 30 L 0 60 z" fill="#800000" /> </marker>
   <marker id="arrowhead1" viewBox="0 0 60 60" refX="60" refY="30" markerUnits="strokeWidth" markerWidth="8" markerHeight="10" orient="auto">
        <path d="M 0 0 L 60 30 L 0 60 z" fill="#800000" /> </marker>
   <marker id="arrowhead2" viewBox="0 0 60 60" refX="60" refY="30" markerUnits="strokeWidth" markerWidth="16" markerHeight="10" orient="auto">
        <path d="M 0 0 L 60 30 L 0 60 z" fill="#800000" /> </marker>
<line marker-end="url(#arrowhead0)" x1="1" y1="1" x2="100" y2="100" stroke="#800000" />
<line marker-end="url(#arrowhead1)" x1="1" y1="100" x2="50" y2="50" stroke="#800000" />
<line marker-end="url(#arrowhead2)" x1="100" y1="1" x2="50" y2="50" stroke="#800000" />
<rect x="1" y="1" width="100" height="100" stroke="green" fill="none"/>
</g></svg>

＆＃13;

Answer 2

refX和refY控制，根据需要进行调整。 E.g。

＆＃13;

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<g><marker id="arrowhead0" viewBox="0 0 60 60" refX="44" refY="34" markerUnits="strokeWidth" markerWidth="8" markerHeight="10" orient="auto">
            <path d="M 0 0 L 60 30 L 0 60 z" fill="#800000" /> </marker>
<line marker-end="url(#arrowhead0)" x1="1" y1="1" x2="100" y2="100" stroke="#800000" />
<rect x="1" y="1" width="100" height="100" stroke="green" fill="none"/>
</g></svg>

＆＃13;

Answer 3

使用＆＃34; marker-start＆＃34;而不是＆＃34; marker-end＆＃34;，向后绘制箭头，并交换线的端点。

＆＃13;

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<g><marker id="arrowhead0" viewBox="0 0 60 60" refX="0" refY="30" markerUnits="strokeWidth" markerWidth="8" markerHeight="10" orient="auto">
            <path d="M 60 0 L 0 30 L 60 60 z" fill="#800000" /> </marker>
<line marker-start="url(#arrowhead0)" x1="100" y1="100" x2="1" y2="1" stroke="#800000" />
<rect x="1" y="1" width="100" height="100" stroke="green" fill="none"/>
</g></svg>

＆＃13;

SVG：对齐＆＃34;标记结束＆＃34;行尾

3 个答案: