Question

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

＆＃13;

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

＆＃13;

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

Answer 1

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

您也可以使用与下面相同的方法，但您可以使用SVG <mask>或<clipPath>元素，而不是使用CSS Masks。关于如何使用这些元素，这里还有很多其他问题。这种方法也适用于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" width="700px"/>
    <div class="progress-bg"></div>
</div>

这里我们有一个绿色背景的div。最重要的是，我们有一个灰色的div代表进度条的“背景”。我们这样做是这样的，所以我们可以将灰色div的“left”属性设置为与进度百分比相同的值。

最后整个事情被我们的SVG屏蔽了。

Answer 2

您可以通过设置遮罩或过滤器的动画，并使用fakeSMIL library对IE进行polyfill来实现。以下是过滤器版本。

<svg width="800px" height="400px">
  <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" height="400" width="700" />
  
  </svg>

Answer 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>

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

3 个答案: