主页 / 问题 / 1112923
Accepted
Monkey Mutant
Asked:2020-04-20 18:03:55 +0000 UTC2020-04-20 18:03:55 +0000 UTC

颜色更改过渡不起作用：在谷歌浏览器中悬停

  • 772

有一个常circle

并且还希望看到更改的平滑度，这是在使用时fill通过类型变量分配的var(--color)use

我知道shadow dom这件事，不需要解释，但我想看到一种顺利改变的方法fill

在 Firefox 中运行良好，在其他任何地方都没有......

示例问题本身：

svg {
  --color: red;
}

circle {
  transition: 0.34s linear;
}

svg:hover {
  --color: blue;
}
<svg width="0" height="0">
  <symbol viewBox="0 0 20 20" id="c">
    <circle cx="10" cy="10" r="10" fill="var(--color)">
  </symbol>
</svg>

<svg width="50px"><use xlink:href="#c" /></svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <use xlink:href="#icon" x="0" y="0" class="icon"/>
</svg>

svg

2 个回答

  1. Best Answer

    事实证明改变了 y 的颜色<use，如果有趣的话..

    svg {
  --color: red;
}

use {
  transition: 0.34s linear;
  fill : var(--color);
}

svg:hover {
  --color: blue;
}
    <svg width="0" height="0">
  <symbol viewBox="0 0 20 20" id="c">
    <circle cx="10" cy="10" r="10" />
  </symbol>
</svg>

<svg width="50px"><use xlink:href="#c" /></svg>

    • 4 

  2. CSS.registerProperty({
  name: '--color', 
  syntax: '<color>', 
  initialValue: 'transparent',
  inherits: true,
})
    svg {
  --color: red;
  transition: --color 0.34s linear;
}

svg:hover {
  --color: blue;
}
    <svg width="0" height="0">
  <symbol viewBox="0 0 20 20" id="c">
    <circle cx="10" cy="10" r="10" fill="var(--color)">
  </symbol>
</svg>

<svg width="50px"><use xlink:href="#c" /></svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <use xlink:href="#icon" x="0" y="0" class="icon"/>
</svg>

    • 3

相关问题