Using css in svg

Question

I'm trying to figure out how to make svgs without giving every element a style attribute.

Two problems:

When referencing an external css file, the style appears correctly in a browser, but not in an image viewer. Is this normal/avoidable?

Most of my elements have class and id attributes, and the following css doesnt provide the desired effect, i.e., county 21015 doesnt have its fill overridden

.county
{
font-size:12px;
fill:#d0d0d0;
fill-rule:nonzero;
stroke:#000000;
stroke-opacity:1;
stroke-width:0.1;
stroke-miterlimit:4;
stroke-dasharray:none;
stroke-linecap:butt;
marker-start:none;
stroke-linejoin:bevel;
}

path#21015
{
fill:red;
}

Could it be something to do with the fact that 21015 isn't a valid XML name? Does your CSS work if you give it an ID starting with an alphabetic character? — sethobrien
– sethobrien, Commented Aug 23, 2011 at 7:12

Erik Dahlström · Accepted Answer · 2011-08-23 06:55:03Z

1

If the fill isn't the one you want then there probably is something with higher specificity overriding the stylerule you want, such as an inline style attribute on that element, or some other rule affecting that element. You can also admit defeat by writing "fill: red !important" - that will work in the majority of cases.

Anyway, this is more of a css question than an svg question.

answered Aug 23, 2011 at 6:55

Erik Dahlström

61.3k12 gold badges123 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Chasbeen · Accepted Answer · 2011-08-23 12:24:41Z

0

This is an alternative syntax...

Within the definition tags.. .fil0 {fill:#96989A}

Within the path tag(s) class="fil0"

Direct class references from the path to the definitions will override all others in my experience.

answered Aug 23, 2011 at 12:24

Chasbeen

1,43612 silver badges17 bronze badges

Collectives™ on Stack Overflow

Using css in svg

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related