Невозможно изменить размер значка SVG <use>, если он связан с <symbol> - PullRequest
Новая
       22

Невозможно изменить размер значка SVG <use>, если он связан с <symbol>

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

Я пытаюсь использовать символ SVG в моей разметке, но не могу заставить CSS увеличить размер символа, отображаемого внутри элемента?

У меня есть логотип твиттера, определенный в наборе тегов, и затем я ссылаюсь на него с помощью xlink: href внутри тегов использования. Значок отображается, но когда я добавляю CSS в div # box1, содержащий элемент, размер символа не увеличивается или не уменьшается, а кажется, что он отображается только при размере viewBox.

Кроме того, сам элемент SVG при наведении на него курсора с помощью инструментов рендеринга выполняет рендеринг с разрешением 300 x 150 пикселей - но в коде с этими измерениями ничего нет.

Я действительно смущен - любая помощь будет потрясающей. 

#box1 {
  height: 10rem;
  width: 10rem;
}
<defs style="display: none;">
  <svg id="twitter" viewBox="0 0 19.19 15.95">
      <symbol id="twitter-symbol"><title>twitter</title>
          <path id="twitter-path" d="M19.19,1.92a8.76,8.76,0,0,1-2.28.64A3.9,3.9,0,0,0,18.63.32a6.87,6.87,0,0,1-2.52,1A3.87,3.87,0,0,0,13.23,0,4,4,0,0,0,9.32,4,3.41,3.41,0,0,0,9.44,5,11,11,0,0,1,1.32.72a4.29,4.29,0,0,0-.52,2A4,4,0,0,0,2.56,6.12,3.61,3.61,0,0,1,.76,5.6v0a4,4,0,0,0,3.16,4,4.35,4.35,0,0,1-1,.16,4.9,4.9,0,0,1-.76-.08,4,4,0,0,0,3.68,2.8A7.79,7.79,0,0,1,.92,14.19a6.78,6.78,0,0,1-.92,0A10.83,10.83,0,0,0,6,16c7.24,0,11.19-6.16,11.19-11.47V4a6.83,6.83,0,0,0,2-2" fill="#000">
          </path>
      </symbol>
  </svg>
</defs>

<div id="box1">
  <svg>
      <use xlink:href="#twitter-symbol"/>
  </svg>
</div>

Ответы [ 2 ]

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

Вы используете встроенный SVG-код в своем HTML, поэтому я считаю, что для SVG-пути требуется определенная область просмотра. Например, если вы добавите viewBox = "0 0 60 55" в тег HTML SVG, вы заметите, что размер начнет корректироваться. Так что редактируйте эту часть вашего HTML 

<svg viewBox="0 0 60 55">
   <use xlink:href="#twitter-symbol"/>
</svg>

Чтобы развернуть заметку, в которой вы нашли размер, указанный как 300x150, это стандартный размер по умолчанию, который применяется к встроенному коду SVG HTML (согласно спецификациям HTML5). Это отличается иногда в зависимости от браузера.

Имейте в виду, есть несколько различных методов, которые вы можете использовать при работе с SVG. Ознакомьтесь с руководством ниже, где они подробно описывают SVG и как управлять его размером. Вы можете найти альтернативный способ, который вы бы предпочли использовать.

https://css -tricks.com / scale-svg /

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

<defs> является элементом svg. Это всегда идет внутри SVG. Я сделал несколько изменений, и теперь это работает. Пожалуйста, запустите код и посмотрите, что я сделал. 

#box1 {
  height: 10rem;
  width: 10rem;
}

#twitter{display:none;}
<svg id="twitter">
    <defs>
      <symbol id="twitter-symbol"><title>twitter</title>
          <path id="twitter-path" d="M19.19,1.92a8.76,8.76,0,0,1-2.28.64A3.9,3.9,0,0,0,18.63.32a6.87,6.87,0,0,1-2.52,1A3.87,3.87,0,0,0,13.23,0,4,4,0,0,0,9.32,4,3.41,3.41,0,0,0,9.44,5,11,11,0,0,1,1.32.72a4.29,4.29,0,0,0-.52,2A4,4,0,0,0,2.56,6.12,3.61,3.61,0,0,1,.76,5.6v0a4,4,0,0,0,3.16,4,4.35,4.35,0,0,1-1,.16,4.9,4.9,0,0,1-.76-.08,4,4,0,0,0,3.68,2.8A7.79,7.79,0,0,1,.92,14.19a6.78,6.78,0,0,1-.92,0A10.83,10.83,0,0,0,6,16c7.24,0,11.19-6.16,11.19-11.47V4a6.83,6.83,0,0,0,2-2" fill="#000">
          </path>
      </symbol>
    </defs>
  </svg>


<div id="box1">
  <svg viewBox="0 0 19.19 15.95" width="24">
      <use xlink:href="#twitter-symbol"/>
  </svg>
</div>

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

...