svg：在 <use> 内设置路径样式

Question

我正在尝试使用 CSS 来设置 <symbol> 中特定 <path> 的 fill 的样式。我已将 fill:inherit 分配给符号 <defs> 中的路径，我可以查询 SVG DOM 中符号的 <use> 实例，但我似乎无法在这些实例中访问该路径。我调查了 inherit 的 CSS 和 currentColor 的 <path> 的填充，但没有运气。感谢任何帮助。

<svg>
  <defs>
    <style>
      symbol#DateCard path.purple {
        fill:inherit;
      }
      use[*|href="#DateCard"] path.purple{
        fill:#ff0095;
        transition:fill .6s; 
      }
      use[*|href="#DateCard"] path.purple:hover{
        path:#ff0000;
      }
    </style>
    <symbol id="DateCard">
      <path class="purple" fill="currentColor" d="..."/>
    </symbol>
  </defs>
  <use xlink:href="#DateCard"/>
<svg>

我可以查询符号内的路径，但是当我查询 <use> 实例中的特定路径时，这个 returns 一个空的 NodeList:

document.querySelectorAll('use[*|href="#DateCard"] path.purple')

Answer 1

阴影内的样式 DOM 需要在阴影内完成 DOM。

我从 Styling SVG Content with CSS | Codrops 中学到的是 CSS 变量在这种情况下非常有用。因此，我在这里创建了不同的样式设置方式：在符号内部使用样式属性和样式元素，并结合符号“外部”的 CSS 变量。

.card1 {
  --path1-color: #0099CC;
  --path2-color: #FFDF34;
}

.card2 {
  --path1-color: #00008B;
  --path2-color: #FF8C00;
}

.card2:hover {
  --path1-color: #00BFFF;
}

<svg viewBox="0 0 200 100" width="400">
  <defs>
    <symbol id="DateCard">
      <style>
        .path2 {
          fill: var(--path2-color);
          transition: fill 1s;
        }
        .path2:hover {
          fill: #800000;
        }
      </style>
      <path class="path1" style="fill: var(--path1-color);transition: fill .6s;" d="M20 40 a 20 20 0 1 1 1 0"/>
      <path class="path2" d="M40 60 a 20 20 0 1 1 1 0"/>
    </symbol>
  </defs>
  <use href="#DateCard" class="card1"/>
  <use href="#DateCard" class="card2" transform="translate(80 0)"/>
<svg>

更新

OP 求问能否用SVG中的属性实现悬停效果。 :hover pseudo class 的替代方法是由鼠标进入和离开动画元素启动的动画。不幸的是，它不如 CSS 灵活——很难设置 <animate>.

的样式

下面是一个动画符号中第二个 <path> 的例子：

.card1 {
  --path1-color: #0099CC;
  --path2-color: #FFDF34;
}

.card2 {
  --path1-color: #00008B;
  --path2-color: #FF8C00;
}

.card2:hover {
  --path1-color: #00BFFF;
}

<svg viewBox="0 0 200 100" width="400">
  <defs>
    <symbol id="DateCard">
      <style>
        .path2 {
          fill: var(--path2-color);
        }
      </style>
      <path class="path1" style="fill: var(--path1-color);transition: fill .6s;" d="M20 40 a 20 20 0 1 1 1 0"/>
      <path class="path2" d="M40 60 a 20 20 0 1 1 1 0">
        <animate attributeName="fill" dur="1s" values="#FF8C00;#800000" begin="mouseenter" fill="freeze" />
        <animate attributeName="fill" dur="1s" from="#800000" to="#FF8C00" begin="mouseleave" fill="freeze" />
      </path>
    </symbol>
  </defs>
  <use href="#DateCard" class="card1"/>
  <use href="#DateCard" class="card2" transform="translate(80 0)"/>
<svg>

svg：在 <use> 内设置路径样式

svg: styling a path within <use>

css

svg

shadow-dom

更新