Редактирование SVG, CSS. Центрирование элемента в SVG

Question

 .link {
  color: #ff0000;
  cursor: pointer;
  font-weight: 400;
  text-decoration: none;
 }

 .link--arrowed {
  display: inline-block;
  height: 2rem;
  line-height: 2rem;
 }
 .link--arrowed .arrow-icon {
  position: relative;
  top: -1px;
  transition: transform 0.3s ease;
  vertical-align: middle;
 }
 .link--arrowed .arrow-icon--circle {
  transition: stroke-dashoffset 0.3s ease;
  stroke-dasharray: 95;
  stroke-dashoffset: 95;
 }
 .link--arrowed:hover .arrow-icon {
  transform: translate3d(5px, 0, 0);
 }
 .link--arrowed:hover .arrow-icon--circle {
  stroke-dashoffset: 0;
 }

 <a class="link link--arrowed" href="#">
  Ссылка
  <svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
   <g fill="none" stroke="#ff0000" stroke-width="1.5" stroke-linejoin="round" stroke-miterlimit="10">
    <circle class="arrow-icon--circle" cx="16" cy="16" r="15.12"></circle>
    <path class="arrow-icon--arrow" d="M16.14 9.93L22.21 16l-6.07 6.07M8.23 16h13.98"></path>
   </g>
  </svg>
 </a>

Как можно в этом SVG заменить стрелку на свою иконку .arrow-icon--play и отредактировать, чтобы она вписалась по центру?

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6.906 4.537A.6.6 0 0 0 6 5.053v13.894a.6.6 0 0 0 .906.516l11.723-6.947a.6.6 0 0 0 0-1.032z"/></svg>

 .link {
  color: #ff0000;
  cursor: pointer;
  font-weight: 400;
  text-decoration: none;
 }

 .link--arrowed {
  display: inline-block;
  height: 2rem;
  line-height: 2rem;
 }
 .link--arrowed .arrow-icon {
  position: relative;
  top: -1px;
  transition: transform 0.3s ease;
  vertical-align: middle;
 }
 .link--arrowed .arrow-icon--circle {
  transition: stroke-dashoffset 0.3s ease;
  stroke-dasharray: 95;
  stroke-dashoffset: 95;
 }
 .link--arrowed:hover .arrow-icon {
  transform: translate3d(5px, 0, 0);
 }
 .link--arrowed:hover .arrow-icon--circle {
  stroke-dashoffset: 0;
 }
 .link--arrowed .arrow-icon--play {
  
 }

<a class="link link--arrowed" href="#">
 Ссылка 2
 <svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
  <g fill="none" stroke="#ff0000" stroke-width="1.5" stroke-linejoin="round" stroke-miterlimit="10">
   <circle class="arrow-icon--circle" cx="16" cy="16" r="15.12"></circle>
   <path class="arrow-icon--play" d="M6.906 4.537A.6.6 0 0 0 6 5.053v13.894a.6.6 0 0 0 .906.516l11.723-6.947a.6.6 0 0 0 0-1.032z"></path>
  </g>
 </svg>
</a>

Answer 1

Вот что нашёл:

применение CSS-трансформации:

  rect {
  /* не работает в IE */
  transform: translate(295px,115px);
  }

применение атрибутов для SVG-атрибута для трансформации:

<!-- работает везде -->
<rect width='150' height='80' transform='translate(295 115)' />

получилось так:

 .link {
  color: #ff0000;
  cursor: pointer;
  font-weight: 400;
  text-decoration: none;
 }

 .link--arrowed {
  display: inline-block;
  height: 2rem;
  line-height: 2rem;
 }
 .link--arrowed .arrow-icon {
  position: relative;
  top: -1px;
  transition: transform 0.3s ease;
  vertical-align: middle;
 }
 .link--arrowed .arrow-icon--circle {
  transition: stroke-dashoffset 0.3s ease;
  stroke-dasharray: 95;
  stroke-dashoffset: 95;
 }
 .link--arrowed:hover .arrow-icon {
  transform: translate3d(5px, 0, 0);
 }
 .link--arrowed:hover .arrow-icon--circle {
  stroke-dashoffset: 0;
 }
 .link--arrowed .arrow-icon--play {
  /* не работает в IE */
  transform: translate(5px,4px);
 }

<a class="link link--arrowed" href="#">
 Ссылка 2
 <svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
  <g fill="none" stroke="#ff0000" stroke-width="1.5" stroke-linejoin="round" stroke-miterlimit="10">
   <circle class="arrow-icon--circle" cx="16" cy="16" r="15.12"></circle>
   <path transform="translate(5 4)" class="arrow-icon--play" d="M6.906 4.537A.6.6 0 0 0 6 5.053v13.894a.6.6 0 0 0 .906.516l11.723-6.947a.6.6 0 0 0 0-1.032z"></path>
  </g>
 </svg>
</a>

БЛОГ НА HUSL

Редактирование SVG, CSS. Центрирование элемента в SVG

Ответы (1 шт):