使用 CSS 慢慢地用颜色填充 SVG 图像（如进度条）

Posted 2023-05-08

【中文标题】使用 CSS 慢慢地用颜色填充 SVG 图像（如进度条）

【英文标题】：Slowly fill SVG image with color (like progress bar) using CSS

【发布时间】：2015-01-11 10:37:26

【问题描述】：

我想用颜色而不是进度条填充 svg 图像。我将使用它来制作动画信息图。

Fill the image below slowly with green colour to show it's 30% "full".<br>
<img src="https://cdn.mediacru.sh/P-WOGKdNDiGT.svg" >

在这里提琴：http://jsfiddle.net/47ayquwq/4/

【参考方案1】：

您可以通过为蒙版或过滤器设置动画，并使用fakeSMIL library 为 IE 进行 polyfill 来做到这一点。以下是过滤器版本。

<svg  >
  <defs>
    <filter id="green-fill" x="0%" y="0%">
      <feFlood flood-color="green"/>
      <feOffset dy="210">
        <animate attributeName="dy" from="300" to="210" dur="2s"/>
        </feOffset>
      <feComposite operator="in" in2="SourceGraphic"/>
      <feComposite operator="over" in2="SourceGraphic"/>
      </filter>
    </defs>
  
     <image filter="url(#green-fill)" xlink:href="https://cdn.mediacru.sh/P-WOGKdNDiGT.svg"   />
  
  </svg>

【讨论】：

太棒了！谢谢！这正是我所指的。

有什么办法可以水平地做这个动画吗？

用 dx 代替 dy

【参考方案2】：

您可以通过实现一个矩形进度条然后用 SVG 对其进行遮罩来实现此效果。见下文。然而，这不是一个通用的解决方案。它不能在 IE 上运行，因为 IE 不支持 CSS Masks。

您也可以使用与以下相同的方法，但可以使用 SVG <mask> 或 <clipPath> 元素来代替 CSS 掩码。这里还有很多关于如何使用这些元素的其他问题。这种方法也适用于 IE9+。

.progress 
    position: relative;
    background-color: green;
    -webkit-mask: url(https://cdn.mediacru.sh/P-WOGKdNDiGT.svg) top left / cover;


/* IMG is just here for the size */
.progress IMG 
    visibility: hidden;


/* We expose the green by moving the LHS of the "background" grey */
.progress-bg 
    background-color: gray;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    -webkit-animation-duration: 1s;
    -webkit-animation-name: to30percent;
    -webkit-animation-fill-mode: forwards;
    animation-duration: 1s;
    animation-name: to30percent;
    animation-fill-mode: forwards;


@-webkit-keyframes to30percent 
  from  left: 0%; 
  to  left: 30%; 


@keyframes to30percent 
  from  left: 0%; 
  to  left: 30%; 

<div class="progress">
    <img src="https://cdn.mediacru.sh/P-WOGKdNDiGT.svg" />
    <div class="progress-bg"></div>
</div>

这里有一个绿色背景的 div。在顶部，我们有一个灰色的 div 代表进度条的“背景”。我们正在这样做，因此我们可以将灰色 div 的“left”属性设置为与我们的进度百分比相同的值。

最后，整个事情都被我们的 SVG 掩盖了。

【讨论】：

谢谢！我不确定这是否存在，而且我使用的所有关键字似乎都不正确。现在我知道 CSS 屏蔽存在！ :)

【参考方案3】：

如果您的 svg 实际上只是一些文本或简单的形状，您也可以在 svg 内设置动画（例如作为渐变）。对于 IE，您需要添加 fakeSMIL 库或使用 js 制作动画。

例子：

svg 
    height: 500px;
    width: 100%;

text 
    font: 220px Arial;
    font-weight: bold;
    fill: url(#gradient);

<svg>
    <defs>
        <linearGradient id="gradient" x1="0" y1="0" x2="0" y2="1">
            <stop stop-color="#aaa" offset="0" />
            <stop stop-color="#aaa" offset="1">
                <animate dur="2s" by="-0.5" attributeName="offset" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.4, 0, 0.2, 1" />
            </stop>
            <stop stop-color="green" offset="1">
                <animate dur="2s" by="-0.5" attributeName="offset" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.4, 0, 0.2, 1" />
            </stop>
            <stop stop-color="green" offset="1" />
        </linearGradient>
    </defs>
    <text y="1em">HELLO</text>
</svg>

【讨论】：

谢谢！我也会尝试这个选项:)