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>使用，并将<symbol>放入了<defs>

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

我希望这很清楚。

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

1 个答案: