0

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

谢谢

4

1 回答 1

0

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>从您上面链接的 codepen 中获取了代码。我添加了一个id以便我可以<use>使用它，并且我已经<symbol>将<defs>

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

我希望这足够清楚。

于 2018-09-04T13:38:31.773 回答