Блог

Главная - Вопросы по программированию - — SVG: обводка круга, переопределяющая обводку используемого элемента

— SVG: обводка круга, переопределяющая обводку используемого элемента

#javascript #html #css #svg

#javascript #HTML #css #svg

Вопрос:

Обводка обоих <use> элементов здесь игнорируется. Цвет обводки <circle> установлен синим, который также отображается на обоих <use> элементах. Почему?

Я хочу, чтобы у всех этих трех элементов был другой цвет обводки. но это не работает.

 <svg width="300" class="svg-elem" viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">  
  <circle id="myCircle" cx="5" cy="5" r="4" stroke="blue"/>
   
  <use class="circle1" href="#myCircle" x="10" stroke="grey" fill="blue"/>
   
  <use href="#myCircle" x="20" fill="white" stroke="red"/>
</svg>

Комментарии:

1. Не используйте обводку для круга. В случае, если вам также нужен обведенный синим круг, поместите круг без атрибута обводки в <defs> и <use> его с синей обводкой

Ответ №1:

Потому что circle все еще переопределяет <use> .

введите описание изображения здесь

Вы можете рассмотреть возможность использования переменной CSS для управления цветом обводки, как показано ниже.

 <svg width="300" class="svg-elem" viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">  
  <circle id="myCircle" cx="5" cy="5" r="4" style="stroke:var(--stroke, blue)"/>
   
  <use class="circle1" href="#myCircle" x="10" style="--stroke:gray;" fill="blue"/>
   
  <use href="#myCircle" x="20" fill="white" style="--stroke:red;"/>
</svg>

Комментарии:

1. Я тоже сталкиваюсь с такой же проблемой при использовании CSS.

2. это не решило вашу проблему? как вы можете видеть, он отлично работает во фрагменте. не могли бы вы добавить больше деталей?