CSS attribute namespace selector in SVG -



CSS attribute namespace selector in SVG -

i'm trying utilize next css automatically set style <g> elements.

<style type="text/css"> g[inkscape|label="site"] { fill: blue; stroke: red; stroke-width: 3 } g[inkscape|label="building"] { fill: black; stroke: red; stroke-width: 3 } </style>

however elements remain without fill or stroke settings set.

selecting attribute without namespace works fine.

thank you.

this depends context of question is. svg stand-alone file, embedded in xhtml file (i.e. served application/xhtml+xml) or embedded in html file (i.e. served text/html)

if it's standalone svg, can do

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <style> @namespace inkscape "http://www.inkscape.org/namespaces"; g[inkscape|label="site"] { fill: green; } </style> <g inkscape:label="site" xmlns:inkscape="http://www.inkscape.org/namespaces"> <rect width="150" height="150" stroke-width="1" stroke="rgb(0, 0, 0)" /> </g> </svg>

see http://alohci.net/static/svg_ns.svg

if it's in xhtml file, can do

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> @namespace inkscape "http://www.inkscape.org/namespaces"; g[inkscape|label="site"] { fill: blue; } </style> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <g inkscape:label="site" xmlns:inkscape="http://www.inkscape.org/namespaces"> <rect width="150" height="150" stroke-width="1" stroke="rgb(0, 0, 0)" /> </g> </svg> </body> </html>

see http://alohci.net/static/svg_ns.xhtml

if it's in html file, it's little different because html parser doesn't back upwards custom namespaces. instead have treat attribute's name if normal name colon in it. you'd do

<!doctype html> <html> <head> <style> g[inkscape\:label="site"] { fill: yellow; } </style> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <g inkscape:label="site" xmlns:inkscape="http://www.inkscape.org/namespaces"> <rect width="150" height="150" stroke-width="1" stroke="rgb(0, 0, 0)" /> </g> </svg> </body> </html>

see http://alohci.net/static/svg_ns.html

css svg inkscape

Comments

Popular posts from this blog

php - Android app custom user registration and login with cookie using facebook sdk -

django - Access session in user model .save() -

php - .htaccess Multiple Rewrite Rules / Prioritizing -