Если я буду использовать большее количество значков SVG в веб-приложении, я не смогу использовать прямой ввод кода, как указано ниже для каждой иконки - PullRequest
Новая
       78

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

0 голосов
/ 27 декабря 2018

Если я буду использовать большее количество значков SVG Sprite в веб-приложении, очень сложно использовать приведенный ниже код для всех значков.Есть ли другие простые способы внедрения в веб-приложениях большего количества значков?

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16.3px"
         height="26.9px" viewBox="0 0 16.3 26.9" enable-background="new 0 0 16.3 26.9" xml:space="preserve">
    <g id="bg">
    </g>
    <g id="ui">
        <g>
            <polygon points="8.1,0 10.3,4.3 15.2,5 11.7,8.3 12.5,13 8.1,10.8 3.8,13 4.6,8.3 1.1,5 6,4.3         "/>
            <polygon fill="none" stroke="#000000" stroke-miterlimit="10" points="8.1,13 10.3,17.3 15.2,18 11.7,21.3 12.5,26 8.1,23.8 
                3.8,26 4.6,21.3 1.1,18 6,17.3       "/>
        </g>
    </g>
    <g id="pop_ups">
    </g>
    </svg>

Есть ли другие способы использовать большее количество значков в веб-приложениях?

Ответы [ 2 ]

0 голосов
/ 27 декабря 2018

Если вы не собираетесь обращаться к внутренним частям вашего SVG с помощью кода (то есть изменить цвет с помощью класса CSS или анимировать их с помощью JavaScript), тогда вы можете просто использовать тег img и установить SVG какисточник, как вы бы с любым нормальным изображением.Вы по-прежнему получаете множество преимуществ, которые предлагает SVG, таких как идеальное масштабирование и т. Д. Например: 

<img src="yourIcon.svg">

Должно работать.Удачи!

0 голосов
/ 27 декабря 2018

Один из способов сделать это - дать вашей звезде id и повторно использовать ее с элементом use.На самом деле первый SVG, тот, где вы храните свой код, может быть скрыт.

svg{border:1px solid;}
<svg width="16.3px" height="26.9px" viewBox="0 0 16.3 26.9">
    <polygon id="star" points="8.1,0 10.3,4.3 15.2,5 11.7,8.3 12.5,13 8.1,10.8 3.8,13 4.6,8.3 1.1,5 6,4.3"/>
</svg>
<svg width="16.3px" height="26.9px" viewBox="0 0 16.3 26.9">  
     <use fill="none" stroke="#000000" xlink:href="#star" y="5"/>
</svg>

В этом случае вы можете присвоить элементу <use> атрибут x и / или y.Это позволяет вам перемещать звезду туда, где она вам нужна.

Другой вариант идентифицирует код ваших значков в <symbol> и повторно использует его точно так же, как и раньше, с бонусом, который <symbol> можетимеют атрибут viewBox, и это позволяет вам иметь его в разных размерах.Для этого вы можете присвоить элементу <use> атрибут width и / или height. 

svg{border:1px solid;}
<svg width="16.3px" height="26.9px" viewBox="0 0 16.3 26.9">
<symbol>
    <polygon id="star" points="8.1,0 10.3,4.3 15.2,5 11.7,8.3 12.5,13 8.1,10.8 3.8,13 4.6,8.3 1.1,5 6,4.3" viewBox="0 0 16.3 26.9"/>
</symbol>
    <use fill="none" stroke="#000000" xlink:href="#star"/>
</svg>
<svg width="40" height="40" viewBox="0 0 16.3 26.9">  
    <use fill="none" stroke="#000000" xlink:href="#star" width="30" y="5" />
</svg>

Обратите внимание, что лучше оставить основной путь (в данном случае #star) без заливки и обводки.Таким образом, вы можете придать элементу <use> штрих и заливку, чтобы вы могли получить по-разному заполненные или штрихованные звезды 

<svg width="16.3px" height="26.9px" viewBox="0 0 16.3 26.9">
<symbol>
    <polygon id="star" points="8.1,0 10.3,4.3 15.2,5 11.7,8.3 12.5,13 8.1,10.8 3.8,13 4.6,8.3 1.1,5 6,4.3" viewBox="0 0 16.3 26.9"/>
</symbol>
    <use fill="skyBlue" stroke="#000000" xlink:href="#star"/>
</svg>
<svg width="40" height="40" viewBox="0 0 16.3 26.9">  
    <use fill="gold" stroke="#000000" xlink:href="#star" width="30" y="5" />
</svg>
...