理解svg中画箭头代码[viewbox,refX,refY]
常见示例
最常见的在线条上画箭头代码
<svg>
<!-- 预定义marker-->
<defs>
<marker id="arrow" refX="0" refY="3" markerWidth="20" markerHeight="20" orient="auto">
<path d="M0 0 L0 6 L10 3" style="fill: #ffff;"></path>
</marker>
</marker>
</defs>
<!-- 引用预定义的marker -->
<line class="link" marker-end="url(#arrow)" x1="0" y1="0" x2="80" y2="80"></line>
</svg>
先预定义了一个箭头形状的marker，然后画了一条线，并且将预定义的marker标到线条末端.
画出的图形
实现方法是用path画一个三角形并填充到marker中，形成三角marker，之所以用marker是因为，只有marker才能标到其它图形上. 但是marker是怎样被标记线条末端的？在marker中有refX、refY作用就是用来指定线条末点连接到marker上的位置. 连接上后，箭头指向哪边？orient属性则指定marker的方向.
如何为marker中坐标取值
首先marker与包含的path共用一个坐标系，如果坐标值不对则会显示不全.
比如上面marker的显示范围是(0,0)到(20, 20), path的范围是(0,0)到(10,6)，可知道path完全处在marker的显示区域内，因此path可以全部显示.
如果需改path值，path显示范围为(0,-3)到(10,3)，有一半内容在marker显示区域外，我们看到的就是半个三角形。设置坐标时要知道marker与path是共用同一个坐标系，path坐标不是相对于marker，注意path要在marker的可视范围内
<svg>
<!-- 预定义marker-->
<defs>
<marker id="arrow" refX="0" refY="0" markerWidth="20" markerHeight="20" orient="auto">
<path d="M0 -3 L0 3 L10 0" style="fill: #ffff;"></path>
</marker>
</marker>
</defs>
<!-- 引用预定义的marker -->
<line class="link" marker-end="url(#arrow)" x1="0" y1="0" x2="80" y2="80"></line>
</svg>
如下
理解marker的viewBox属性
用法viewBox(xmin, ymin, width, height)
查看文档可知道viewBox作用是拉伸图形。它是如何控制拉伸的？要想拉伸的话，指定长宽比例就可以了，怎么会用到xmin, ymin, width, height这些值，它们是和拉伸有什么关系？怎么理解？
实际上拉伸只是它的一个功能，换一种叫法就很好理解: 取景框. 它使用xmin,ymin,width,height这些参数确定取景范围，然后将取到的景象，放到marker中，并且充满整个marker. 如果取到的景象比marker可视范围小，则景象会被放大再充满marker；如果取到的景象比marker可视范围大，怎取景会被缩小再充满marker. 所以viewbox有两个功能：一是填充功能；二是拉伸.
比如上面只显示半个三角形，可以通过设置viewbox让它，在marker中完整显示.
<svg>
<!-- 预定义marker-->
<defs>
<marker id="arrow" refX="0" refY="0" markerWidth="20" markerHeight="20" orient="auto" viewBox="0, -3, 10, 6" >
<path d="M0 -3 L0 3 L10 0" style="fill: #ffff;"></path>
</marker>
</marker>
</defs>
<!-- 引用预定义的marker -->
<line class="link" marker-end="url(#arrow)" x1="0" y1="0" x2="80" y2="80"></line>
</svg>
上面viewBox控制了取景范围，正好将整个三角形取出来，再放入长20宽20的marker中，因为viewbox取到的景象长为10宽为6，小于marker大小，要想让三角形充满，则要放大景象，放大的比例长为20/10，宽为20/6.
显示结果
2020年10月09日 14:57
敬启者：个人小网站希望大家多多支持 感谢您对我们热心的支持 f88tw┃华歌尔┃I appreciate your kind assistance. f88tw|墓园|捡骨流程|捡骨费用|捡骨时间|禁忌|捡骨颜色|捡骨师|新竹|时间|台北|桃园|苗栗|头份|火化|晋塔|安葬|法事|捡骨|看日子|墓穴|墓园|坟墓|看日子|乞丐|http://mypaper.m.pchome.com.tw/f88tw
2020年11月21日 20:02
I think this is one of the most significant information for me. And i’m glad reading your article. But should remark on some general things, The web site style is perfect, the articles is really great : D. Good job, cheers sagame66
2020年11月21日 21:55
I was surfing the Internet for information and came across your blog. I am impressed by the information you have on this blog. It shows how well you understand this subject. rappers 1st choice weed strains
2020年11月23日 17:00
Thanks, that was a really cool read! steroids for sale
2020年11月24日 21:04
I think this is an informative post and it is very beneficial and knowledgeable. Therefore, I would like to thank you for the endeavors that you have made in writing this article. All the content is absolutely well-researched. Thanks... Arabic style furniture
2020年11月25日 18:53
Your post is very helpful to get some effective tips to reduce weight properly. You have shared various nice photos of the same. I would like to thank you for sharing these tips. Surely I will try this at home. Keep updating more simple tips like this. migliori tostapane
2020年12月17日 12:43
pleasant post, stay aware of this fascinating work. It truly regards realize that this subject is being secured likewise on this site so cheers for setting aside time to talk about this! treasure at tampines price
2020年12月22日 19:12
It turns out that even the hottest port has a few places where you can get off the beaten path. Here are some recommendations that will make you feel like you're in the know the landmark condo
2020年12月25日 18:40
It turns out that even the hottest port has a few places where you can get off the beaten path. Here are some recommendations that will make you feel like you're in the know perfect ten