svg 标记标签 : marker（二）
本帖最后由 马黑黑 于 2023-11-7 11:53 编辑 <br /><br /><style>.ma p, .ma pre, .ma svg { margin: 8px 0; }
.rred { color: red; }
.zs { color: green; }
.ma pre { padding: 16px; background: #efefef; font: normal 16px monospace; white-space: pre-wrap; word-wrap: break-word; tab-size: 4; line-height:1.5em; }
.ma svg { border: 1px solid gray; }
.flex { display: flex; gap: 8px; align-items: center; }
</style>
<h2>marker标签（二）</h2>
<div class="ma">
<p>marker标记最经典的用途把线段（含直线、曲线）变成箭头。我们先绘制一个小箭头——其实就是一个尖角朝右的小三角形，可以用path或polygon来完成，这里使用polygon绘制：</p>
<pre>
<svg width="10" height="10">
<polygon points="0 0,0 10,10 5" fill="red" />
</svg>
</pre>
<p class="flex">
<span>效果：</span>
<svg width="10" height="10">
<polygon points="0 0,0 10,10 5" fill="red" />
</svg>
</p>
<p>这是很小的一个三角形，把这个三角形放在线段的末端，就是箭头了：</p>
<pre>
<svg width="100" height="100">
<defs>
<marker id="jt" markerWidth="10" markerHeight="10" refX="5" refY="5">
<polygon points="0 0,0 10,10 5" fill="red" />
</marker>
</defs>
<line x1="10" y1="10" x2="90" y2="10" stroke="purple" marker-end="url(#jt)" />
<line x1="10" y1="15" x2="90" y2="85" stroke="purple" marker-end="url(#jt)" />
<line x1="10" y1="20" x2="10" y2="90" stroke="purple" marker-end="url(#jt)" />
</svg>
</pre>
<svg width="100" height="100">
<defs>
<marker id="jt" markerWidth="10" markerHeight="10" refX="5" refY="5">
<polygon points="0 0,0 10,10 5" fill="red" />
</marker>
</defs>
<line x1="10" y1="10" x2="90" y2="10" stroke="purple" marker-end="url(#jt)" />
<line x1="10" y1="15" x2="90" y2="85" stroke="purple" marker-end="url(#jt)" />
<line x1="10" y1="20" x2="10" y2="90" stroke="purple" marker-end="url(#jt)" />
</svg>
<p>
<label for="orient">【</label>
<input id="orient" type="checkbox" value="auto"/>
<label for="orient">自动定向 <span class="rred">orient="auto"</span> 】</label>
</p>
<p>可是，除了水平线正常，斜线和竖线的箭头都患上了小儿麻痹症，长歪了。这是因为我们没有设置定向属性 <span class="rred">orient</span>，你可以勾选“自动定向”复选按钮将marker标记的定向设置为 orient="auto"，酱紫就能让箭头的朝向正确；取消勾选则又恢复原样。顺便提示一下，“自动定向”复选按钮也会影响后续的示例，因为它们都是使用了 id="jt" 的 marker 标记。</p>
<p>如果我们给 line 标签添加 marker-start 属性，则直线的头尾都会有箭头标记，但添加 marker-mid 属性，直线的中间不会出现出现箭头——我们上一节讲过，marker-mid 是为线段的衔接点准备的。所以，如果想在线段中间也加入箭头或其他标记，我们需要设置多线段连接，换言之，总线段应由多条线段组合而成。使用path绘制的曲线中，如果只是一个单一的二次或三次贝塞尔曲线，则它也和line一样没有衔接点，加T或S之后，每一个T或S都是一个衔接点。我们可以这样理解：用path绘制的路径，定位起点的M指令和第一个绘制指令不计在内，其他的，每出现一个绘制指令，都是路径的一个衔接点，都接受 marker-mid 标记。下面，先从代码比较一下使用贝塞尔曲线指令绘制的曲线，判断一下，若在其上使用 marker-mid 属性，它是否会生效：</p>
<pre>
① 二次贝塞尔曲线 ：d="<span class="zs">M</span>10 50 <span class="zs">Q</span>50 -30,100 50"
② 二次贝塞尔曲线+T : d="<span class="zs">M</span>10 50 <span class="zs">Q</span>50 -30,100 50 <span class="rred">T</span>190 50"
③ 三次贝塞尔曲线 : d="<span class="zs">M</span>10 50 <span class="zs">C</span>0 0, 110 0,100 50"
④ 三次贝塞尔曲线+S : d="<span class="zs">M</span>10 50 <span class="zs">C</span>0 0, 110 0,100 50 <span class="rred">S</span>200 100,190,50"
</pre>
<p>以下的演示，每一个贝塞尔曲线都是用了 marker-mid 属性调用箭头标记，请对应上面的代码进行比较：</p>
<svg width="200" height="120">
<text x="10" y="110">二次贝塞尔曲线</text>
<path d="M10 50 Q50 -30,100 50" fill="none" stroke="green" marker-start="url(#jt)" marker-mid="url(#jt)" marker-end="url(#jt)" />
</svg>
<svg width="200" height="120">
<text x="10" y="110">二次贝塞尔曲线+T</text>
<path d="M10 50 Q50 -30,100 50 T190 50" fill="none" stroke="green" marker-start="url(#jt)" marker-mid="url(#jt)" marker-end="url(#jt)" />
</svg>
<br>
<svg width="200" height="120">
<text x="10" y="110">三次贝塞尔曲线</text>
<path d="M10 50 C0 0, 110 0,100 50" fill="none" stroke="green" marker-start="url(#jt)" marker-mid="url(#jt)" marker-end="url(#jt)" />
</svg>
<svg width="200" height="120">
<text x="10" y="110">三次贝塞尔曲线+S</text>
<path d="M10 50 C0 0, 110 0,100 50 S200 100,190,50" fill="none" stroke="green" marker-start="url(#jt)" marker-mid="url(#jt)" marker-end="url(#jt)" />
</svg>
<p>标记定向属性 <span class="rred">orient</span> 除了auto值，还有其他几个。完整的属性值如下：</p>
<pre>
auto | auto-start-reverse | <angle> | <number>
</pre>
<p>其中，auto-start-reverse 表示，首端标记取反向、其他取自动转向；<angle> 和 <number> 都是使用角度表示标记的转向，二者的区别不好理解，这里不谈。</p>
<p>【小结】本讲主要讨论marker标记的定位属性 <span class="rred">orient</span>，该属性最常用的值是 auto，它可以令标记的朝向与调用者实体的线段或路径走向保持一致。特殊定向需求可以考虑使用其他上面提供的备选值。我们还专门复习了 <span class="rred">marker-mid</span>，它是总线段或总路径的衔接点的标记而不是一条独立线段或路径的中间标记。</p>
</div>
<script>
orient.onclick = () => {
jt.setAttribute('orient', orient.checked ? 'auto' : '');
};
</script>
““自动定向”复选按钮也会影响后续的示例”
点击选项，去看下面的示例，果然也都跟着变了{:4_173:} 还是做圆的标志好，不用管方向{:4_173:} marker-mid 是总路径的衔接点的标记，而不是中间标记。——记下了{:4_187:} 红影 发表于 2023-11-7 13:23
marker-mid 是总路径的衔接点的标记，而不是中间标记。——记下了
这个很重要 红影 发表于 2023-11-7 13:21
还是做圆的标志好，不用管方向
但是，实际应用，圆点不能代表一切。比方说，做一个丘比特之箭，你就用圆点来做？ 红影 发表于 2023-11-7 13:20
““自动定向”复选按钮也会影响后续的示例”
点击选项，去看下面的示例，果然也都跟着变了
道理很简单 新的知识点，小辣椒学习一下{:4_173:} 黑黑分享辛苦了{:4_187:} 马黑黑 发表于 2023-11-7 19:24
这个很重要
看字面很容易弄错。 马黑黑 发表于 2023-11-7 19:27
但是，实际应用，圆点不能代表一切。比方说，做一个丘比特之箭，你就用圆点来做？
嗯，所以 orient定向还是要用到的。 马黑黑 发表于 2023-11-7 19:27
道理很简单
看着它们转向，很好玩{:4_173:} 红影 发表于 2023-11-7 21:58
看着它们转向，很好玩
箭头等有朝向，所以marker标记需要处理这些 红影 发表于 2023-11-7 21:58
嗯，所以 orient定向还是要用到的。
对 红影 发表于 2023-11-7 21:56
看字面很容易弄错。
对，字面的信息量也挺大 小辣椒 发表于 2023-11-7 21:22
黑黑分享辛苦了
{:4_191:} 马黑黑 发表于 2023-11-8 07:16
箭头等有朝向，所以marker标记需要处理这些
所以才有 orient的出现。 马黑黑 发表于 2023-11-8 07:16
对
也有不用到的时候。 马黑黑 发表于 2023-11-8 07:17
对，字面的信息量也挺大
现在知道了，一条连续的线是不能加上这个的。 红影 发表于 2023-11-8 19:48
现在知道了，一条连续的线是不能加上这个的。
有一些东东可以顾名思义，marker-mid不行
页:
[1]
2