Как заполнить или штриховать элемент SVG в спрайте SVG. - PullRequest
Новая
       32

Как заполнить или штриховать элемент SVG в спрайте SVG.

0 голосов
/ 28 ноября 2018

У меня проблемы с просмотром выбранного элемента и применением цвета к выбранному элементу.

Например, у меня есть спрайт изображения с именем untitled.svg, в котором перечислены коллекции значков.Я хочу выбрать, скажем, календарь.Я могу выбрать элемент, но не могу просмотреть или оформить календарь выбранных элементов.Я вижу пути, которые выводятся, но не удается стилизовать вывод.

пример кода для календаря 

<symbol id="calendar" x="160" y="0" class="st1" width="100%" height="100%" stroke="blue" style="
">
    <title>calendar</title>

<path class="st0" d="M181.3,23.3h-10.8c-0.6,0-1.1-0.5-1.1-1.1V11.5c0-0.6,0.5-1.1,1.1-1.1h10.7c0.6,0,1.1,0.5,1.1,1.1v10.7  C182.3,22.9,181.9,23.3,181.3,23.3z M170.5,11.2c-0.2,0-0.4,0.1-0.4,0.4v10.7c0,0.2,0.1,0.4,0.4,0.4h10.7c0.2,0,0.4-0.1,0.4-0.4  V11.5c0-0.2-0.1-0.4-0.4-0.4C181.3,11.2,170.5,11.2,170.5,11.2z"/>
<path class="st0" d="M172.3,8.8h0.7v1.8h-0.7V8.8z"/>
<path class="st0" d="M178.8,8.8h0.7v1.8h-0.7V8.8z"/>
<path class="st0" d="M175.9,14.6c-0.8,0-1.4-0.6-1.4-1.4c0-0.8,0.6-1.4,1.4-1.4s1.4,0.6,1.4,1.4C177.3,13.9,176.7,14.6,175.9,14.6z   M175.9,12.4c-0.4,0-0.7,0.3-0.7,0.7s0.3,0.7,0.7,0.7s0.7-0.3,0.7-0.7S176.3,12.4,175.9,12.4z"/>
<path class="st0" d="M179.5,14.6c-0.8,0-1.4-0.6-1.4-1.4c0-0.8,0.6-1.4,1.4-1.4c0.8,0,1.4,0.6,1.4,1.4  C180.9,13.9,180.3,14.6,179.5,14.6z M179.5,12.4c-0.4,0-0.7,0.3-0.7,0.7s0.3,0.7,0.7,0.7c0.4,0,0.7-0.3,0.7-0.7  S179.9,12.4,179.5,12.4z"/>
<path class="st0" d="M172.3,18.1c-0.8,0-1.4-0.6-1.4-1.4c0-0.8,0.6-1.4,1.4-1.4c0.8,0,1.4,0.6,1.4,1.4  C173.8,17.5,173.1,18.1,172.3,18.1z M172.3,16c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7c0.4,0,0.7-0.3,0.7-0.7  S172.7,16,172.3,16z"/>
<path class="st0" d="M175.9,18.1c-0.8,0-1.4-0.6-1.4-1.4c0-0.8,0.6-1.4,1.4-1.4s1.4,0.6,1.4,1.4S176.7,18.1,175.9,18.1z M175.9,16  c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7s0.7-0.3,0.7-0.7S176.3,16,175.9,16z"/>
<path class="st0" d="M179.5,18.1c-0.8,0-1.4-0.6-1.4-1.4c0-0.8,0.6-1.4,1.4-1.4c0.8,0,1.4,0.6,1.4,1.4S180.3,18.1,179.5,18.1z   M179.5,16c-0.4,0-0.7,0.3-0.7,0.7c0,0.4,0.3,0.7,0.7,0.7c0.4,0,0.7-0.3,0.7-0.7S179.9,16,179.5,16z"/>
<path class="st0" d="M172.3,21.7c-0.8,0-1.4-0.6-1.4-1.4s0.6-1.4,1.4-1.4c0.8,0,1.4,0.6,1.4,1.4S173.1,21.7,172.3,21.7z M172.3,19.6  c-0.4,0-0.7,0.3-0.7,0.7s0.3,0.7,0.7,0.7c0.4,0,0.7-0.3,0.7-0.7S172.7,19.6,172.3,19.6z"/>
<path class="st0" d="M175.9,21.7c-0.8,0-1.4-0.6-1.4-1.4s0.6-1.4,1.4-1.4s1.4,0.6,1.4,1.4S176.7,21.7,175.9,21.7z M175.9,19.6  c-0.4,0-0.7,0.3-0.7,0.7s0.3,0.7,0.7,0.7s0.7-0.3,0.7-0.7S176.3,19.6,175.9,19.6z"/>

</symbol>

Чего мне не хватает.Я новичок в использовании svgs indepth.

Ответы [ 2 ]

0 голосов
/ 29 ноября 2018

Это работает для меня.Файл SVG и HTML-файл находятся в одной папке.Надеюсь, это поможет.

HTML-документ, где я использую спрайт:

Обратите внимание, что я использую sof.svg#symb

<!DOCTYPE html>
<html lang="en">
<head>
  <style>svg{border:1px solid;overflow:visible;}</style>
</head>
<body>

  <svg viewBox="0 0 14 16" width="50">
    <use xlink:href="sof.svg#symb" fill="red"/>
  </svg>

</body>
</html>
svg document sof.svg

Обратите внимание, чтоsymbol имеет идентификатор id="symb"

<svg xmlns="http://www.w3.org/2000/svg">  
<symbol viewBox="169 8 14 16" id="symb" style="overflow: visible">
<path class="st0" d="M181.3,23.3h-10.8c-0.6,0-1.1-0.5-1.1-1.1V11.5c0-0.6,0.5-1.1,1.1-1.1h10.7c0.6,0,1.1,0.5,1.1,1.1v10.7  C182.3,22.9,181.9,23.3,181.3,23.3z M170.5,11.2c-0.2,0-0.4,0.1-0.4,0.4v10.7c0,0.2,0.1,0.4,0.4,0.4h10.7c0.2,0,0.4-0.1,0.4-0.4  V11.5c0-0.2-0.1-0.4-0.4-0.4C181.3,11.2,170.5,11.2,170.5,11.2z"/>
<path class="st0" d="M172.3,8.8h0.7v1.8h-0.7V8.8z"/>
<path class="st0" d="M178.8,8.8h0.7v1.8h-0.7V8.8z"/>
</symbol>
</svg>
0 голосов
/ 28 ноября 2018

Symbol Не используйте тег.Вместо этого используйте тег svg. Таким образом, вы сможете увидеть свой рисунок на экране.

...