CODEWITHSUNDEEP
htmlsvg
Jesper Bruun Hansen
Jesper Bruun Hansen

Reputation: 376

Add color and image to fill of SVG circle

I'm looking for a way to fill a SVG circle with a solid color AND an image.

What I have tried for now, is to use this code:

<svg>
    <defs>
        <pattern id="visits" height="23" width="14">
            <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="icons/visit.png" height="23" width="14" x="0" y="0"></image>
        </pattern>
    </defs>
    <circle cx="30" cy="39" r="9" fill="url(#visits)"></circle>
</svg>

Which draws a circle with my background image, but I would like a background color to my circle as well - how can I achieve this?

I'm looking for an end result as this: http://www.tiikoni.com/tis/view/?id=4ff44d1 - where the red background can be changed, and the white cross is an image.

Upvotes: 2

Views: 3106

Answers (1)

Robert Longson
Robert Longson

Reputation: 123985

Just add a red background to the pattern.

<svg>
    <defs>
        <pattern id="visits" height="23" width="14">
            <rect height="23" width="14" fill="red"/>
            <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="icons/visit.png" height="23" width="14" x="0" y="0"></image>
        </pattern>
    </defs>
    <circle cx="30" cy="39" r="9" fill="url(#visits)"></circle>
</svg>

Upvotes: 8

Related Questions