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

Я пытаюсь создать медиа-шары для страницы my-media, например Facebook, twitter и т. д. Я попытался использовать font awesome и подумал об использовании текстового юникода, такого как это решение: Значок в круг SVG, но я бы предпочел использовать необработанный 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" />

код для необработанного значка 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?

Можете ли вы показать любое изображение, которого хотите достичь?

— 24.10.2018 08:05

html svg

24.10.2018 02:14

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

505

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

24.10.2018 08:54

Другие вопросы по теме

SVG не открывается с помощью командной строки inkscape, но открывается с помощью графического интерфейса

Почему jQuery не может изменять атрибуты тега ширины / высоты элемента svg, но отлично работает с другими атрибутами?

Сделайте стрелку выбора HTML с полной областью фона

Как разрешить svg быть интерактивным внутри ссылки

Отображение элемента на изображении svg в относительной позиции

Есть ли способ повернуть шаблон feImage или feTile в SVG?

Почему смайлы юникода в wordpress отображаются с тегом <img>?

Свойства SVG игнорируются в Firefox

Анимировать начальный угол дуги с помощью d3.js

Оптимизирована функция цветопередачи

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

Ответы 1

Другие вопросы по теме

Похожие вопросы