Log in / Register

Forum › How do I...?

Override presentation attributes present in an svg with external CSS

wachunga
In webkit and gecko, I can override paths that have a fill attribute with css. But with Prince (9 rev 4), it appears my external CSS only applies to paths that have no fill attribute.

For example, in the below example, the first two paths work as expected (ie, consistent with webkit/gecko) but not the last, which remains grey.

Is this possible with Prince? The svgs we get from Illustrator have fills set, which we need to theme later with CSS.

<html>
<style>
.pie-series-1 {
	fill: red !important;
}
.pie-series-2 {
	fill: green !important;
}
.pie-series-3 {
	fill: blue !important;
}
</style>
<body>
<svg id="chart" version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" stroke-linejoin="round" viewBox="0 0 500 500">
	<path class="pie-series-1" stroke-width="4" d="M250,250 l1.506265815201524e-14,-246 A246,246 0 1,1 4,250.00000000000003 z"></path>
	<path class="pie-series-2" style="fill: #444" stroke-width="4" d="M250,250 l-246,3.012531630403048e-14 A246,246 0 0,1 34.42855670920957,131.488596170978 z"></path>
	<path class="pie-series-3" fill="#555" stroke-width="4" d="M250,250 l-215.57144329079043,-118.51140382902199 A246,246 0 0,1 249.99999999999994,4 z"></path>
</svg>
</body>
</html>

Pulse Energy

mikeday
Right, it seems that presentational attributes are supposed to be equivalent priority to author style declarations, but they are currently being treated as higher priority than style attributes. Perhaps we can change this in the next release of Prince.
wachunga
I haven't actually checked the spec, but that seems like a good change. As a workaround, it seems we can change the behaviour of the Illustrator export plugin to use inline styles instead of attributes.
http://www.adobe.com/inspire/2013/09/exporting-svg-illustrator.html

Pulse Energy

mikeday
We have fixed this in Prince 9 rev 5, available now. Thanks for letting us know about this issue.