SVG：为形状的一部分设置填充颜色

Question

我有一个椭圆形，我想分成四个部分。 是否可以为这些部分单独着色或是否有必要创建4个单独的自定义形状？

（我发布了图片，但没有代表）。 希望它明白我的意思。

编辑您可以在这里查看代码http://jsfiddle.net/KQ3eH/

<html>
<head>

<style>

.anellipse {
    fill:rgb(255,255,255);
    stroke-width:2;
    stroke:rgb(0,0,0);
}

.aline {
    stroke:rgb(0,0,0);
    stroke-width:2;
}

</style>

</head>
<body>

<svg xmlns="http://www.w3.org/2000/svg"
     version="1.1"
     width="960"
     height="640">
<ellipse class="anellipse" cx="480" cy="320" rx="478" ry="318"/>
<line class="aline" x1="2" y1="320" x2="958" y2="320" stroke-linecap="round" stroke-dasharray="1, 4"/>
<line class="aline" x1="480" y1="2" x2="480" y2="638" stroke-linecap="round" stroke-dasharray="1, 4"/>
</svg>

</body>
</html>

Answer 1

您可以使用图案进行多色填充。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="960" height="640">
        <defs>
            <pattern id="pat" width="1" height="1" viewBox="0 0 1 1" preserveAspectRatio="none">
                <rect width=".5" height=".5" fill="red" />
                <rect x=".5" width=".5" height=".5" fill="green" />
                <rect y=".5" width=".5" height=".5" fill="orange" />
                <rect x=".5" y=".5" width=".5" height=".5" fill="blue" />
            </pattern>
        </defs>
        <ellipse class="anellipse" cx="480" cy="320" rx="478" ry="318" fill="url(#pat)"/>
        <line class="aline" x1="2" y1="320" x2="958" y2="320" stroke-linecap="round" stroke-dasharray="1, 4" />
        <line class="aline" x1="480" y1="2" x2="480" y2="638" stroke-linecap="round" stroke-dasharray="1, 4" />
    </svg>

参见示例 。

Answer 2

您不能进行多色填充（无论如何最多不能超过两种颜色）。 因此，您基本上必须将其分为四个部分。

分割椭圆形状本身有些棘手。 一种更简单的方法是绘制四个彩色矩形并将椭圆用作剪切路径。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="960" height="640">
    <defs>
        <clipPath id="myell">
          <ellipse class="anellipse" cx="480" cy="320" rx="478" ry="318" />
        </clipPath>
    </defs>

    <g clip-path="url(#myell)">
      <rect x="2" y="2" width="478" height="318" fill="red"/>
      <rect x="480" y="2" width="478" height="318" fill="green"/>
      <rect x="2" y="320" width="478" height="318" fill="orange"/>
      <rect x="480" y="320" width="478" height="318" fill="blue"/>
    </g>

</svg>

在这里演示