Menu
Okay... I'm going nuts over here. I've started experimenting with SVG. Working with SVG and applying CSS classes to it works like a charm. I just cant figure out what i'm doing wrong, but i just cant get the class to work on a svg text element. I've stripped it all the way down and this is what i got:
<!DOCTYPE html> <html> <head> <meta charset='UTF-8'> <title>Playground</title> </head> <body> <style type="text/css"> .mainsvg { height: 320px; border: 1px solid red; width: 400px; } .caption { color: yellow; } </style> <h2>SVG - Sandbox</h2> <div> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="mainsvg"> <text x="65" y="40" class="caption">Fact</text> </svg> </div> </body> </html> According to http://www.w3.org/TR/SVG/styling.html#ClassAttribute this should work...
Any hints/tips on what to change, or an alternative?
664
Setting just the color property has no directly visible effect in svg, but you can use that color for the fill , stroke or even both, e.g text { fill: currentColor } .
Go to the svg file and under styles, mention the color in fill. Show activity on this post. Show activity on this post. I have used span element with "display:inline-block", height, width and setting a particular style "color: red; fill: currentColor;" to that span tag which is inherited by the child svg element.
To change some of the text in the HTML document to another color use the FONT COLOR Tag. To change the color of the font to red add the following attribute to the code to the <FONT COLOR=" "> tag. #ff0000 is the color code for red.
Setting the class is correct but the CSS color property has no effect on SVG. SVG uses fill and stroke properties. In your case you probably just need to change color to fill. This displays yellow text for me in Firefox.
<!DOCTYPE html> <html> <head> <meta charset='UTF-8'> <title>Playground</title> </head> <body> <style type="text/css"> .mainsvg { height: 320px; border: 1px solid red; width: 400px; } .caption { fill: yellow; } </style> <h2>SVG - Sandbox</h2> <div> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="mainsvg"> <text x="65" y="40" class="caption">Fact</text> </svg> </div> </body> </html> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
