CODEWITHSUNDEEP
svg
Paul Rooney
Paul Rooney

Reputation: 21609

SVG: set fill color for part of a shape

I have an ellipse shape, which I want to split into 4 sections. Is it possible to independently color these sections or is it necessary to create 4 separate custom shapes ?

(I'd post a picture but I don't have the rep yet). Hope its clear what I mean.

Edit you can see code here 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>

Upvotes: 0

Views: 2464

Answers (2)

Erik Dahlstr&#246;m
Erik Dahlstr&#246;m

Reputation: 60976

You can do multicolor fills using a pattern.

<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>

See example.

Upvotes: 3

Paul LeBeau
Paul LeBeau

Reputation: 101820

You can't do multi-colour fills (well not more than two colours anyway). So you basically have to split it up into four sections.

Splitting up the ellipse shape itself is a bit tricky. A much easier way would be to draw four coloured rectangles and use the ellipse as a clipping path.

<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

Upvotes: 2

Related Questions