用颜色填充 SVG 路径，但使用悬停淡入模式

Question

我正在尝试添加 SVG 图像（在本例中为比利时国旗）作为 SVG 路径（实际上是椭圆）的填充。悬停时，椭圆的填充必须变为红色。换句话说，填充 SVG 必须“淡出”。我尝试了一种使用 CSS 的方式，但 SVG 模式和过渡似乎都不起作用。我在 Chrome 和 Firefox 上试过。

svg ellipse {
  fill: url(#img1);
  transition: fill 400ms;
}

svg:hover ellipse {
  fill: red;
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" version="1.1" height="480" width="640" viewBox="0 0 640 480">
  <defs>
    <pattern x="0" y="0" id="img1" height="480" width="640" viewBox="0 0 640 480">
        <g fill-rule="evenodd" stroke-width="1pt">
          <path d="M0 0h213.335v479.997H0z" />
          <path fill="#ffd90c" d="M213.335 0H426.67v479.997H213.335z" />
          <path fill="#f31830" d="M426.67 0h213.335v479.997H426.67z" />
        </g>
    </pattern>
  </defs>
  <rect fill="none" stroke="blue" x="1" y="1" width="640" height="480"/>
  <ellipse stroke="black" stroke-width="5" cx="400" cy="200" rx="350" ry="150" />
</svg>

Answer 1

你不能像那样过渡fill，因为这两个填充不是可以在它们之间平滑插值的东西。

您需要做的是有两个版本的椭圆，一个在另一个之上。然后淡入或淡出顶部。

.visible-on-hover {
  transition: opacity 400ms;
  opacity: 0;
}

.visible-on-hover:hover {
  opacity: 1;
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" version="1.1" height="480" width="640" viewBox="0 0 640 480">
  <defs>
    <pattern x="0" y="0" id="img1" height="1" width="1"
             viewBox="0 0 640 480" preserveAspectRatio="xMidYMid slice">
        <g fill-rule="evenodd" stroke-width="1pt">
          <path d="M0 0h213.335v479.997H0z" />
          <path fill="#ffd90c" d="M213.335 0H426.67v479.997H213.335z" />
          <path fill="#f31830" d="M426.67 0h213.335v479.997H426.67z" />
        </g>
    </pattern>
  </defs>
  <rect fill="none" stroke="blue" x="1" y="1" width="640" height="480"/>
  <ellipse stroke="black" stroke-width="5" cx="400" cy="200" rx="350" ry="150" fill="url(#img1)"/>
  <ellipse stroke="black" stroke-width="5" cx="400" cy="200" rx="350" ry="150" fill="red" class="visible-on-hover"/>
</svg>