Поместите значки брендов SVG в круг SVG

Question

Я пытаюсь создать медиа-шары для страницы my-media, поэтому Facebook, Twitter и т. Д. Я пытался использовать шрифт потрясающе, и подумал об использовании текстового юникода, как это решение: Значок в SVG Circle но я бы лучше использовал raw svg и уменьшил его для моего использования.

https://jsfiddle.net/8v64ympo/1/

Допустим, я хочу, чтобы серый кружок был ссылкой наЗначок кодаКак я могу либо поместить значок в круг, либо просто масштабировать его, чтобы заменить круг.Я пытался использовать его как тег изображения, но это не было идеей.код для страницы:

<svg id="view" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 1000 1000" xml:space="preserve">

<circle class="orbit" r="300" fill="none" transform="translate(500 500)" stroke-width="1" stroke="#ffffff" />
<circle class="orbit" r="120" transform="translate(500 500)" stroke-width="1" stroke="#ffffff" />
<circle id="grey-circle" r="30" transform="translate(500 380)" fill="#777777" />
<circle r="70" transform="translate(500 500)" fill="#FDB813" />
<circle r="60" transform="translate(500 500)" fill="#ff8800" />

код для raw svg icon:

<svg aria-hidden="true" data-prefix="fab" data-icon="codepen" class="svg-inline--fa fa-codepen fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"><path fill="currentColor" d="M502.285 159.704l-234-156c-7.987-4.915-16.511-4.96-24.571 0l-234 156C3.714 163.703 0 170.847 0 177.989v155.999c0 7.143 3.714 14.286 9.715 18.286l234 156.022c7.987 4.915 16.511 4.96 24.571 0l234-156.022c6-3.999 9.715-11.143 9.715-18.286V177.989c-.001-7.142-3.715-14.286-9.716-18.285zM278 63.131l172.286 114.858-76.857 51.429L278 165.703V63.131zm-44 0v102.572l-95.429 63.715-76.857-51.429L234 63.131zM44 219.132l55.143 36.857L44 292.846v-73.714zm190 229.715L61.714 333.989l76.857-51.429L234 346.275v102.572zm22-140.858l-77.715-52 77.715-52 77.715 52-77.715 52zm22 140.858V346.275l95.429-63.715 76.857 51.429L278 448.847zm190-156.001l-55.143-36.857L468 219.132v73.714z"></path></svg>

Я поступаю неправильно, стоит ли вообще отбросить svgи использовать JS, canvas и просто иконки SVG?

Answer 1

Я использую логотип codepen в качестве символа и уменьшаю его.Я помещаю символ вместе с кружком внутри группы и перевожу группу.

view{
    width: 60%;
    margin: 0 auto;
    display: block;
  }
  
  html{
     background-color:black;
  }
  
  .orbit{
    stroke-dasharray:2;
  }

<link rel="stylesheet" href="temp.css">

<svg id="view" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 1000 1000" xml:space="preserve">
<defs>
  <symbol id="CP" viewBox="0 0 512 512"><path  d="M502.285 159.704l-234-156c-7.987-4.915-16.511-4.96-24.571 0l-234 156C3.714 163.703 0 170.847 0 177.989v155.999c0 7.143 3.714 14.286 9.715 18.286l234 156.022c7.987 4.915 16.511 4.96 24.571 0l234-156.022c6-3.999 9.715-11.143 9.715-18.286V177.989c-.001-7.142-3.715-14.286-9.716-18.285zM278 63.131l172.286 114.858-76.857 51.429L278 165.703V63.131zm-44 0v102.572l-95.429 63.715-76.857-51.429L234 63.131zM44 219.132l55.143 36.857L44 292.846v-73.714zm190 229.715L61.714 333.989l76.857-51.429L234 346.275v102.572zm22-140.858l-77.715-52 77.715-52 77.715 52-77.715 52zm22 140.858V346.275l95.429-63.715 76.857 51.429L278 448.847zm190-156.001l-55.143-36.857L468 219.132v73.714z"></path></symbol>
</defs>
    <circle class="orbit" r="300" fill="none" transform="translate(500 500)" stroke-width="1" stroke="#ffffff" />
    <circle class="orbit" r="120" transform="translate(500 500)" stroke-width="1" stroke="#ffffff" />
<g transform="translate(500 380)">   
    <circle r="30" fill="#777777" />
    <use xlink:href="#CP" width="30" height="30" x="-15" y="-15" fill="white" /> 
</g> 
    <circle r="70" transform="translate(500 500)" fill="#FDB813" />
    <circle r="60" transform="translate(500 500)" fill="#ff8800" />
    
</svg>