使用 SVG 图标路径绘图 [关闭]

Question

我是 SVG 新手。我想做一个像下图这样的图标。如何使用 svg 路径实现这一点？ Icon image

Answer 1

画一个三角形和一个圆。

<svg width="100" height="100" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
    <g transform="matrix(1,0,0,1,0,-0.377897)">
        <circle cx="49.509" cy="63.179" r="22.737" style="fill:none;stroke:black;stroke-width:1.8px;"/>
        <g transform="matrix(0.837287,0,0,0.838403,6.90389,6.94193)">
            <path d="M50.885,9.42L69.326,39.219L32.444,39.219L50.885,9.42Z" style="fill:none;stroke:black;stroke-width:2.15px;"/>
        </g>
    </g>
</svg>

更新。

<svg width="100" height="100" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
    <g transform="matrix(1,0,0,1,0,-0.377897)">
        <g transform="matrix(1,0,0,1,0.490673,0)">
            <circle cx="49.509" cy="63.179" r="22.737" style="fill:none;stroke:black;stroke-width:1.8px;"/>
        </g>
        <g transform="matrix(0.837287,0,0,0.838403,7.39456,13.5265)">
            <path d="M50.885,9.42L69.326,39.219C69.326,39.219 61.595,32.108 51.566,31.949C40.814,31.778 32.444,39.219 32.444,39.219L50.885,9.42Z" style="fill:none;stroke:black;stroke-width:2.15px;"/>
        </g>
    </g>
</svg>

Answer 2

使用 SVG 是在您的网站上显示矢量图像的一种非常有趣的方式。在深入讨论之前，您可能需要参考这些文档：Mozilla / W3

<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg">
 <g>
  <title>BG</title>
  <rect fill="#fff" id="canvas_background" height="602" width="802" y="-1" x="-1"/>
  <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
   <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
  </g>
 </g>
 <g>
  <title>SVG-01</title>
  <ellipse ry="56" rx="56" id="svg_1" cy="268" cx="400" stroke-width="1.5" stroke="#000" fill="#fff"/>
  <path id="svg_2" d="m366.72932,213.48481l33.27077,-58.22384l33.27077,58.22384l-66.54153,0z" stroke-width="1.5" stroke="#000" fill="#fff"/>
 </g>
</svg>