CODEWITHSUNDEEP
jqueryhtmlcsssvg
Akbar Basha
Akbar Basha

Reputation: 1198

how to use url in fill property

Here is my code:

<?xml version="1.0" standalone="no"?>
<html>
    <head>
        <style>
             .someClass {
                fill:"url(#Pattern)";
            }
        </style>
    </head>
    <body>
        <div>
            <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
                <defs>
                    <pattern id="Pattern" x="0" y="0" width=".25" height=".25">
                        <rect x="0" y="0" width="50" height="50" fill="skyblue"/>
                        <circle cx="25" cy="25" r="20" fill-opacity="0.5"/>
                    </pattern>
                </defs>
                <rect id="rect" fill="url(#Pattern)" stroke="black" x="0" y="0" width="200" height="200"/>
            </svg>
        </div>
    </body>
</html>

In rect I have added a fill property directly. It worked but if I set class(.someClass) instead of the fill property the code is not working properly.

How to resolve this?

I need to set the class instead of fill in rect.

Upvotes: 0

Views: 2361

Answers (1)

ketan
ketan

Reputation: 19341

Check following it's working. There is no need of "" (double quote) in css.

.someClass {
    fill:skyblue;
}

.otherClass {
    fill:url(#Pattern);
}
<div>
    <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
        <defs>
            <pattern id="Pattern" x="0" y="0" width=".25" height=".25">
                <rect x="0" y="0" width="50" height="50" class="someClass"/>
                <circle cx="25" cy="25" r="20" fill-opacity="0.5"/>
            </pattern>
        </defs>
        <rect id="rect" class="otherClass"  stroke="black" x="0" y="0" width="200" height="200"/>
    </svg>
</div>

Fiddle link

Upvotes: 1

Related Questions