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

Question

我想用javascript动态创建svg矩形。 这些矩形应该是一种2D图形条，它充满了多种背景颜色，如下所示：

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

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

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

Answer 1

如果设置了停止颜色，渐变是停止时颜色的瞬间变化，则可以使用linearGradient进行此操作。 E.g。

<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>元素上设置变换，并将所有矩形放在任何位置。