使用材质图标更改 SVG d="" 路径

Question

想使用这个有吸引力的插件：SVG radial menu，但我不知道如何更改 svgs d="" 路径。我想插入例如社交图标而不是默认图标。当我把这些codepen social 的路径放在那里时（它们不同= 更大——它显示得很糟糕）。我在哪里/如何找到他们使用其 SVG 类型的方式...？我是 SVG 的新手。

谢谢

Answer 1

codepen SVG 社交媒体图标更大，但这无关紧要。因为它们是方形的，所以很完美。为了能够使用这些图标，您需要将它们转换为符号并将它们缩小到所需的大小：在这种情况下为 96。

我已将符号 id="codepen" 放入 <defs>，并且我正在使用带有 <use> 的符号，如下所示：<use xlink:href ="#codepen" width="96" height="96"/>

接下来是我只使用一个图标的代码。为了简化，我删除了其他所有内容：

svg{height:100vh;}

<svg class="menu" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 792 792" >
  <defs>  
    <symbol id="codepen" viewBox="0 0 512 512" ><path fill="black" d="M427 201.9c-0.6-4.2-2.9-8-6.4-10.3L264.2 87.3c-4.9-3.3-11.4-3.3-16.3 0L91.4 191.6c-4 2.7-6.5 7.4-6.5 12.2v104.3c0 4.8 2.5 9.6 6.5 12.2l156.4 104.3c4.9 3.3 11.4 3.3 16.3 0L420.6 320.4c4-2.6 6.6-7.4 6.6-12.2V203.9C427.1 203.2 427.1 202.6 427 201.9 427 201.7 427.1 202.6 427 201.9zM270.7 127.1l115.2 76.8 -51.5 34.4 -63.8-42.7V127.1zM241.3 127.1v68.6l-63.8 42.7 -51.5-34.4L241.3 127.1zM114.3 231.4l36.8 24.6 -36.8 24.6V231.4zM241.3 384.9L126.1 308.1l51.5-34.4 63.8 42.6V384.9zM256 290.8l-52-34.8 52-34.8 52 34.8L256 290.8zM270.7 384.9V316.3l63.8-42.6 51.5 34.4L270.7 384.9zM397.7 280.6l-36.8-24.6 36.8-24.6V280.6z"/></symbol>   
  </defs>
  <g class="All-on" fill="none" fill-rule="evenodd" transform="translate(-571 -143)">
    <g class="menu" transform="translate(571 143)">
      <g class="outside-layer">
        <circle class="outer-cirlce-background" cx="396" cy="396" r="396" fill="#000" fill-opacity=".4"/>
        <g class="more-menu" transform="translate(654 229)">
          
          <g class="writing-button" transform="translate(24 120)">
            <title>My Posts</title>
            <circle class="Oval-2-Copy-7" cx="48" cy="48" r="48" fill="#00F7FF" opacity=".6"/>
            <use xlink:href ="#codepen"  width="96" height="96"/>
          </g>
          
        </g>
      </g>
    </g>
  </g>
</svg>

我希望它有所帮助。

更新：

我从您上面链接的代码笔中获取了<symbol> 的代码。我添加了一个id，这样我就可以<use>it，我把<symbol>放在<defs>中

在您上面链接的 SVG 径向菜单中，有一个 <g class="writting-button"> 在这个 <g>里面我正在用 <use xlink:href ="#codepen" width="96" height="96"/> 替换 <path class="Shape">。在这种情况下，“#codepen” id 是 <symbol> 的 id。设置<use> 的宽度和高度很重要。在这种情况下width="96" height="96"因为被替换的<path>的BBox是96/96。

我希望这已经足够清楚了。