创建一个svg矩形,用百分比或像素填充不同的背景颜色

Question

我想用javascript动态创建svg矩形.这些矩形应该是一种2D图形条,填充多种背景颜色,如下所示:

是否存在可以处理多种背景颜色的svg的任何形状？我不想使用多个矩形并尝试定位它们......

更好的事情是,如果存在一种我可以放入子元素的堆栈面板......

因为那时我想将这些元素绑定到knockoutjs.

Answer 1

您可以使用linearGradient进行此操作,如果您设置停止颜色,使得渐变是停止时颜色的即时更改.例如

<svg xmlns="http://www.w3.org/2000/svg">

    <defs>
      <linearGradient id="MyGradient" x2="0%" y2="100%">
        <stop offset="33%" stop-color="white" />
        <stop offset="33%" stop-color="#FF6" />
        <stop offset="66%" stop-color="#FF6" />
        <stop offset="66%" stop-color="#F60" />
      </linearGradient>
    </defs>

    <rect fill="url(#MyGradient)" stroke="black" stroke-width="5"  
          x="100" y="100" width="200" height="600"/>
</svg>

或者,也许更简单地说,您可以使用3种不同的填充动态创建3个rects.如果将矩形作为<g>元素的子元素,则可以在<g>元素上设置变换,并将所有矩形放在任何位置.