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

Question

我想用 javascript 动态创建 svg 矩形。这些矩形应该是一种填充了多种背景颜色的二维图表条，就像这样:

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

如果存在一种堆栈面板，我可以在其中放入子元素，那就更好了......

因为那时我想将这些元素绑定(bind)到 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 个矩形。如果您将矩形作为 <g> 的子项您可以在 <g> 上设置转换的元素元素，它会将所有矩形放在您想要的任何位置。