Задать вопрос

svgartru2016

Информация
Пользователь пока ничего не рассказал о себе

Наибольший вклад в теги

Все теги (1)

Лучшие ответы пользователя

Все ответы (3)

  • Как корректно встроить SVG и/или SVGZ с таблицей стилей?

    @svgartru2016
    Совершенно верно Лев Солнцев объяснил: "Так работает use"
    Если более подробно, то как только мы применяем команду
    use
    всё что внутри попадает в shadow DOM и внешние стили не работают, но есть способы обойти эти ограничения.
    1. Так как инлайновые стили имеют более высокий приоритет, чем внешние стили, то необходимо их убрать.
    Поэтому сборщики спрайтов автоматически удаляют все инлайн fill, stroke
    2. Так как svg элементы внутри теневого дома не наследуют родительские свойства, необходимо заставить их это сделать
    circle rect{
    fill:inherit;
    stroke:inherit;
    }

    3 .В svg файл добавить строку с указанием управляющего внешнего файла CSS
    <?xml-stylesheet type="text/css" href="css/svg.css" ?>

    4. В SVG классы не работают их нужно заменить на id=" ".
    Ниже внешний файл svg.css добавил ещё изменение цвета при наведении курсора
    #circle{ 
fill:red;
stroke:black;
stroke-width:1px;
}
#rect{ 
fill:yellowgreen;
stroke:black;
stroke-width:1px;
}
circle rect{
fill:inherit;
stroke:inherit;
}
#rect:hover { 
fill:red;
stroke-width:3px;
}
 #circle:hover{
 fill: yellowgreen;
 stroke-width:3px;
 }

    Ниже файл SVG к которому применяются внешние стили. Это один из вариантов. Можете брать этот код и вставлять непосредственно в HTML - будет также работать. Можете вставить файл SVG в HTML посредством тега object. Подробнее здесь.
    <?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css" href="css/svg.css" ?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="120" height="55" viewBox="0 0 120 55" >
  <defs>
    <symbol id="circle"  >
      <circle   cx="25" cy="27" r="24"/>
    </symbol>
    <symbol id="rect" >
      <rect    x="60" y="2" width="48" height="48"/>
    </symbol>
  </defs>

  <use xlink:href="#circle"></use>
  <use xlink:href="#rect"></use>
  
  </svg>
    Ответ написан
    Комментировать
    Комментировать