Question

我有一个椭圆形状，我想分成4个部分。是否可以独立地为这些部分着色，或者是否有必要创建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>

请参阅example。

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>

Demo here

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

2 个答案: