Giter Site home page Giter Site logo

Comments (7)

shawnbot avatar shawnbot commented on July 1, 2024 2

As of v2.1.0 you can also now nest <use> elements arbitrarily, so you can style imported symbols with a container, e.g.:

<svg>
  <g fill="red"><use xlink:href="sprite.svg#symbol"/></g>
  <g fill="blue"><use xlink:href="sprite.svg#symbol"/></g>
</svg>

FWIW, I've got another update in the works that replaces the <use> element with a <g> element that has the former's attributes, so in the future you'll be able to simply do this:

<svg>
  <use fill="red" xlink:href="sprite.svg#symbol"/>
  <use fill="blue" xlink:href="sprite.svg#symbol"/>
</svg>

from svg4everybody.

didoo avatar didoo commented on July 1, 2024

icon-arrow-link != icon-arrow-menu maybe?

from svg4everybody.

Favitalegur avatar Favitalegur commented on July 1, 2024

sorry, copied the wrong part here.

from svg4everybody.

liamness avatar liamness commented on July 1, 2024

Pretty sure this will only work if the IE fallback is in use. If the <use xlink:href="iconset.svg#iconname"></use> syntax can be used, then the elements within the SVG cannot be targeted by your CSS, i.e. you will only be able to style the entire SVG element from the page's CSS.

from svg4everybody.

Rendez avatar Rendez commented on July 1, 2024 
<svg xmlns="http://www.w3.org/2000/svg">
  <symbol id="icon-arrow-link" viewBox="0 0 10 5">
    <polygon fill="currentColor" points="10,5 0,5 5,0 "/>
    <polygon fill="blue" points="10,5 0,5 5,0 "/>
  </symbol>
</svg>

would work on:

<svg role="img"> <use xlink:href="path/Sprite.svg#icon-arrow-link"></use> </svg>

if you set:

svg { color: red }

from svg4everybody.

fvsch avatar fvsch commented on July 1, 2024

Chrome is correct here (Safari too). This is not supposed to work.

It works in IE because the script changes the DOM of your icon instances to:

<svg …>
    <!-- content of your symbol -->
    <polygon class="red" … />
    <polygon class="blue" … />
</svg>

It works in Firefox because behind the scenes Firefox generates a shadow dom that looks like this:

<svg …>
  <use>
    <svg>
      <!-- content of your symbol -->
      <polygon class="red" … />
      <polygon class="blue" … />
    </svg>
  <use>
</svg>

AND Firefox has a bug where ordinary selectors can pierce through the shadow dom (at least in this case). It's likely that this bug will be fixed in the future.

Bottom line:

  • If you're using an external SVG sprite, don't expect to be able to style specific elements from your symbols. You can, however, style the parent <svg> element (the one referencing the symbol) with SVG properties such as fill and stroke, and these will be inherited by the symbol's child and descendant elements (unless they're hardcoded to different values). You also do not need to add fill="currentColor" to every path and polygon, since you can just set it for all svg elements. (I use svg.icon { fill: currentColor; } in my main stylesheet.) Finally, you can try to be creative with what values you hardcode in the symbol and what values you let it inherit from the "instance", which allows things like optional strokes or two-color fills, but it's still rather complex and limited. If you need a few multicolor icons and illustrations, consider putting them in an inline sprite in addition to your external sprite (for monochrome icons).
  • If you're using an inline sprite (e.g. placed after <body>; at the end of the document would be an option if Safari supported it, but it doesn't), you will be able to target individual paths and polygons (and other shapes or groups) using regular CSS selectors, but note that it will impact all instances of the icon on the page.

from svg4everybody.

jnowland avatar jnowland commented on July 1, 2024

To add to @fvsch comments - this is working as intended - see: http://tympanus.net/codrops/2015/07/16/styling-svg-use-content-css/

from svg4everybody.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.