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
Post a Comment