Изменение пути SVGs d = "" с иконками материала - PullRequest
Новая
       46

Изменение пути SVGs d = "" с иконками материала

0 голосов
/ 03 сентября 2018

хочу использовать этот привлекательный плагин: Радиальное меню SVG , но я не могу узнать, как изменить этот путь svgs d = "". Я хочу вставить, например, социальные иконки вместо значков по умолчанию. Когда я помещаю туда пути этих codepen social (которые отличаются = больше - они отображаются ужасно). Где / как я могу найти способ, которым они используют свои типы SVG ...? Я новичок в SVG.

Спасибо

1 Ответ

0 голосов
/ 04 сентября 2018

Значки кода для социальных сетей 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>

Надеюсь, это поможет.

UPDATE:

Я взял код для <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>. Важно установить ширину и высоту для <use>. В этом случае width="96" height="96", поскольку BBox замененного <path> равен 96/96.

Надеюсь, это достаточно ясно.

...