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>

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

1 个答案: