11 ms·
Does this work when you reference svgs within css though? Or do you need to have access to the svg nodes?
by ianfeather 13y ago
Does this work when you reference svgs within css though? Or do you need to have access to the svg nodes?
- ahoge 13y agoYou do that inside the SVG. Instead of having a yet another path or a group of paths, you just have that `use` element (which just references some other node). Basically, it lets you reuse something, but you can transform it and set some styles. http://kaioa.com/svg/chemicalzen3.svg http://kaioa.com/svg/chemicalzen3.svg http://kaioa.com/svg/chemicalzen3_parts.png http://kaioa.com/svg/chemicalzen3_parts.png The "master" shape is used to create the outline and it's also used to clip the "interior" layer. http://kaioa.com/svg/armyofclonesani.svgz http://kaioa.com/svg/armyofclonesani.svgz There is just one dude. Then there is a row of clones. And then there are transformed clones of that row. Only the original dude is animated. Edit: A big benefit of clones is that they are always in sync. If you change the shape of the original, the clones follow suit.
- ianfeather 13y agoThat's awesome. Very very cool. Will look into it, thanks!
- car 13y agoYou can reference SVG documents or elements within those in HTML. More here: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/x... Here an example, where a whole svg document is linked to from another svg element (scaled with viewBox): <div> <svg viewBox="0 0 500 500" width="200" height="75"> <g> <use xlink:href="#BaseQuality-svg"></use> </g> </svg> </div>