Question

我正在尝试为my-media页面制作媒体球，因此在Facebook，twitter等上，我尝试使用超棒的字体，并考虑使用基于文本的unicode这样的解决方案：Icon into SVG Circle，但我宁愿使用原始的svg并将其缩小以供我使用。

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

让我说我希望灰色圆圈成为指向Codepen图标的链接。如何将图标放在圆圈中，或只是缩放比例以替换圆圈。我尝试将其用作图像标签，但这不是主意。页面代码：

<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" />

原始svg图标的代码：

<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，画布和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>

将svg品牌图标放入svg圈子

1 个答案: