Selecting SVGs without inline css

GotoleiGotolei
edited April 2014 in Style Development
Is there a way to do this? I can change all svgs using path{} but it seems to defy any attempts at narrowing it down.
#toolbar-name path{}, path[fill="#aaaaaa"]{}, etc..

I'd prefer to do it without having to modify the svgs if possible.

Comments

  • JasonBarnabeJasonBarnabe
    1. Firefox or Chrome?
    2. Is this a SVG document, SVG within another kind of document, or an SVG reference (e.g. with IMG)
    3. Have you set any namespace?
  • GotoleiGotolei
    edited April 2014
    Firefox, base64 embedded, any namespace I set (including there.is.only.xul) breaks the app style.

    http://pastebin.com/Secf3PfQ
  • LouCypherLouCypher
    Use SVG namespace @namespace url(http://www.w3.org/2000/svg);.
  • GotoleiGotolei
    edited April 2014
    How exactly is this used? Still no dice using normal selectors.
    (also it breaks the rest of the style, but one thing at a time I guess.. I put it in its own for now)

    http://i.imgur.com/01Qx8Y0.png
    (ignore typo in screenshot, adding # did nothing)
  • LouCypherLouCypher
    edited April 2014
    First make sure the attribute value is exactly the same like in the DOM (case sensitive)
    e.g. using bebebe or BEBEBE

    Screenshot (works for me):
    Image3.png
    845 x 331 - 38K
  • GotoleiGotolei
    edited April 2014
    Do I need a @-moz-document for every image then? How would this be done for embedded images?

    Edit: the DOM inspector has chrome://browser/content/browser.xul for the url. No luck with that either. Tried it on the #505050-colored buttons to avoid case-related problems.. nope.
    http://pastebin.com/zbKQqbSy

    Are there any add-ons that are known to conflict with svg usage or anything?
  • freecyberfreecyber
    edited April 2014
    I don't know much about svgs, but your svg path as defined in your pastebin doc doesn't have a fill attribute, it has a style attribute defining the fill, so this may work (no namespace or @-moz-document needed but you may be able to use them)(it works for me with the svg just displayed in the browser window - I don't understand how you're using yours - as a css background-image maybe?):
    path[style="fill:#505050;fill-opacity:1;stroke:none"] {fill: #f00 !important; }
    If your svg uses this (note fill="#505050"):
    <svg ... <path d="M 8,1 0.25,8.75 1.75,10.25 3,9 l 0,6 4,0 0,-3 c 0,-0.554 0.446,-1 1,-1 0.554,0 1,0.446 1,1 l 0,3 4,0 0,-6 1.25,1.25 1.5,-1.5 L 8,1 z m 3,1 0,0.75 2,2 L 13,2 11,2 z" inkscape:connector-curvature="0" id="path2998" fill="#505050" fill-opacity="1" stroke="none" /> </svg>
    then you can use
    path[fill="#505050"] { fill: #f00 !important; }
  • GotoleiGotolei
    edited April 2014
    path[style*="fill:#aabbcc"] works, thanks all \o/

    Had to remove @-moz-document line though, and the @namespace line seems to be unnecessary.
  • LouCypherLouCypher
    Forgot to say to ignore @-moz-document on my screenshot
Sign In or Register to comment.