Question

我试图建立一个图形，这就是这个想法：

我有一个图像表示图形是空的，而另一个图像表示图形填充。

所以我有一张图片100％宽度，另外20％，50％等等

问题是我不知道如何指定我想要更改宽度属性的图像

这里有两个图像100％的小提琴，我想将红色的一个改为80％（例如）：

代码：

 <svg height="100%" width="100%">
         <image xlink:href="http://www.cebbra44.com/images/barra_verde.jpg" x="0" y="0" width="100%" height="100%"/>
         <image xlink:href="http://www.construtorafgs.com.br/img/bgs/barra_porcentagem_vermelha.png" x="0" y="0" width="100%" height="100%"/>
            <defs>
                 <clipPath id="theSVGPath">
                       <rect x="0" y="0" width="100%" height="100%"/>
                 </clipPath>
           </defs>
</svg>

有什么想法吗？

感谢。

ps：我无法简单地更改图像宽度中的一个，因为它们必须与剪辑路径必须使用的高度相同。

Answer 1

通过添加class属性并更改CSS以仅选择该图像，您可以仅对其中一个图像使用剪辑路径。

Updated fiddle.

（无论如何，将整个SVG剪切到100％的宽度和高度都是多余的，所以我们只剪辑需要剪裁的图像。）

Answer 2

您是否考虑使用简单的rect和渐变而不是图像？然后你可以直接操纵宽度而不会弄乱clip-path s。

<svg width="500px" height="100px">
  <defs>
    <linearGradient id="indicator-gradient" x1="0" x2="0" y1="0" y2="1">
      <stop offset="0%" stop-color="hsl(0, 100%, 38%)"/>
      <stop offset="100%" stop-color="hsl(0, 100%, 31%)"/>
    </linearGradient>
  </defs>
  <rect x="2%" width="96%" height="100%" fill="hsl(78, 66%, 45%)"></rect>
  <rect y="25%" width="20%" height="50%" fill="url(#indicator-gradient)"></rect>
</svg>

（这里还有一个性能优势，因为渲染SVG元素比从服务器请求图像资源更快。客户端的总下载大小也会更小。）

SVG - 具有不同行为的多个图像

2 个答案: