SVG路径/哪种方式正确?

时间:2017-10-31 10:07:58

标签: svg

我问的原因是因为,每个人都这样做。

></path>

所有教程都显示/>而没有</path>

Spotify的:

<svg class="icon-play" viewBox="0 0 85 100"><path fill="currentColor" d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path></svg>

谷歌:

 <svg width="100" height="100" style="background-color:pink;" viewBox="0 0 24 24">
    <path fill="currentColor" style="fill:green;" d="M7.995,18.9899999 13.68046871,15.4912499 13.68046871,8.49374997 7.995,4.995 Z M13.6804687,15.4912499 19.3659374,11.99249994 19.3659374,11.99249994 13.6804687,8.49374997 Z"></path>
  </svg>

Twitter的:

<svg style="fill: currentcolor;color: #1DA1F2;" width="67" height="67" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="10"></circle>
<path fill="white" d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
<path fill="green" d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" ></path>
</svg>

的YouTube:

<svg width="100" height="100" version="1.1" style="background-color:black;" viewBox="0 0 36 36">
 <path fill="currentColor" style="fill:#0059dd; "d="M 12,26 18.5,22 18.5,14 12,10 z M 18.5,22 25,18 25,18 18.5,14 z"></path>
</svg>

1 个答案:

答案 0 :(得分:1)

两者都不正确,也不正确。两种方式都有效。使用您喜欢的任何一种。

显然,如果路径包含子元素(例如<title><animate>,那么您需要使用结束标记。否则,它并不重要。

相关问题