时间戳

首页 > 解决方案 > 使用 SVG 图标路径绘图

javascript - 使用 SVG 图标路径绘图

问题描述

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

标签： javascriptcsssvg

解决方案

画一个三角形和一个圆。

<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>

推荐阅读