Как можно заставить работать содержимое элемента defs?

Question

Закир

html , css

Как можно заставить работать содержимое элемента defs?

Почему код из style не работает в браузере Mozilla? Псевдокласс hover также не отображается. Svg встроен непосредственно в код. На данный момент имеется следующий код:<br/> <pre><code class="html">&lt;defs&gt;
 &lt;style&gt;
  svg:hover [id*="svg_"]
  {
   fill: red;
  }
 &lt;/style&gt;
&lt;/defs&gt;
&lt;g&gt;
 &lt;path stroke="#000" id="svg_4" d="m18.99999,7.93701c0,0 0.70778,-2.36665 0,-3.16835c-0.70861,-0.80169 -0.99122,-1.33571 -2.54933,-1.71801s-0.99039,-0.30611 -2.12333,-0.26701c-1.13295,0.03843 -2.07748,0.53401 -2.07748,0.80102c0,0 -0.70778,0.03843 -0.99039,0.26768c-0.28344,0.22925 -0.7553,1.29728 -0.7553,1.56496s0.23593,2.06189 0.47185,2.44352l-0.28094,0.07619c-0.23593,2.21359 0.9437,2.48128 0.9437,2.48128c0.42433,2.06189 0.8495,1.184 0.8495,1.71801s-0.42517,0.34387 -0.42517,0.34387s-0.37681,0.83945 -1.32052,1.14489c-0.9437,0.30477 -6.18243,1.94591 -6.60843,2.28979c-0.426,0.34455 -0.37765,1.94726 -0.37765,1.94726l22.46466,0c0,0 0.04919,-1.60272 -0.37681,-1.94726c-0.42683,-0.34455 -5.66556,-1.98502 -6.60926,-2.28979c-0.9437,-0.30544 -1.32052,-1.14489 -1.32052,-1.14489s-0.42517,0.19014 -0.42517,-0.34387s0.42517,0.34387 0.85033,-1.71801c0,0 1.1788,-0.26768 0.9437,-2.48128l-0.28344,0z" stroke-opacity="null" stroke-width="1.5" fill="red"/&gt;
 &lt;path stroke="#000" transform="rotate(-44 15.142580986022958,22.01788711547852) " id="gl_1" d="m2.55312,22.0179l25.17892,0m-25.17892,0l12.58949,-12.45141l12.58943,12.45141l-12.58943,12.45137l-12.58949,-12.45137z" stroke-opacity="null" stroke-width="1.5" fill="#ffff00"/&gt;
 &lt;path stroke="#000" transform="rotate(-44 15.142580986022958,22.01788711547852) " id="svg_6" d="m2.55312,22.0179l25.17892,0m-25.17892,0l12.58949,-12.45141l12.58943,12.45141l-12.58943,12.45137l-12.58949,-12.45137z" stroke-opacit

6 мая 2024 г. 12:11

Ответы на вопрос 1

Похожие вопросы

Answer 1

1. Чтобы заставить работать содержимое элемента defs, необходимо включить ссылку на элемент внутри другого элемента в вашем SVG-коде. Например, вы можете использовать внутри элемента <use> для повторного использования содержимого в defs.

2. Код из style не работает в браузере Mozilla, потому что стили, определенные внутри элемента defs, не могут быть применены к элементам за пределами этого элемента в некоторых браузерах, включая Mozilla. Рекомендуется определять стили внутри элемента <style> в самом SVG-элементе или использовать внешние таблицы стилей.

3. Псевдокласс hover также не отображается из-за того, что стили для hover состояния не могут быть применены к элементам внутри defs. Для того чтобы стили hover работали, необходимо определить их непосредственно в элементе, к которому они должны быть применены, в данном случае - внутри <path> элемента.