4

I want to create svg rectangles dynamically with javascript. Those rectangles should be kind of a 2D diagramm bar filled with multiple background colors just like so:

enter image description here

Does there exist any shape for svg which can handle multiple background colors ? I do not want to use multiple rectangles and try to position them...

Event better would be if there would exist kind of a stackpanel where I can put into child elements...

because then I would like to bind those elements to knockoutjs.

4

1 に答える 1

9

グラデーションがストップで色の瞬間的な変化になるようにストップカラーを設定すると、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>すべての四角形を好きな場所に配置できます。

于 2013-06-11T20:32:44.543 に答える