CODEWITHSUNDEEP
svg
Abdul Rauf
Abdul Rauf

Reputation: 675

SVG Element Grouping without <use> tag

The SVG <use> tag doesn't work in chrome. How do I group svg shapes like rect,circle,path without using SVG use tag ?

EDIT:

But when i drag the <g> element in iframe its not move all the element that <g> contain is there any other way to get i all child element and drag them with loop?????

Upvotes: 2

Views: 1781

Answers (4)

joeyhoer
joeyhoer

Reputation: 3767

It appears that this is a bug in older versions of Webkit. It's working in the current version of Chrome, but not Safari. Try closing the use tag like this <use …></use> rather than <use …/> and it should work. See this comment.

Also, I've noticed that you need to specify the XML Namespace xmlns:xlink="http://www.w3.org/1999/xlink" in your svg tag if you're using it as a data URI in your CSS.

Upvotes: 2

Bill Doss
Bill Doss

Reputation: 601

I was having an issue with the tag when trying an example from the tutorial here: http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html

The line in question was

<use xlink:href="G" transform="translate(120,0)" fill="#bbb">

where G was a group of rect's and ellipses defined earlier and given the id "G". To get this to work in Chrome I found I had to add an "#" before the link name like

<use xlink:href="#G" transform="translate(120,0)" fill="#bbb">

With that change, a second copy of the group "G" appeared in the browser.

Bill

Upvotes: 0

Jack
Jack

Reputation: 1

I tried the sample code from:

http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#SVG_web

<g stroke="black" stroke-width="2" fill="none" >
  <ellipse id="g1" cx="100" cy="100" rx="75" ry="40" />
  <use xlink:href="g1" transform="rotate(30 100 100)"/>
  <use xlink:href="g1" transform="rotate(60 100 100)"/>
</g>

It doesn't work in Firefox, Chrome or Opera.

Also from the URL above

Operations: Grouping, Reusing, Scaling, Translation and Rotation

Thus far we have had the opportunity to see much similarity between SVG and HTML: two markup languages with tags and attributes that modify the way those tags look. Where SVG starts to look less like a markup language and more like a programming environment is in its ability to reuse and modify its own content (within its own system). That is, elements can be contained in other elements in such a way that containers modify the appearance of the elements inside them. Specifically we can group and reuse elements in ways that simplify maintenance of code and which shorten the overall length of our documents. The <use> (reuse) and <g> (or group) tags bear similarity to the variables and objects encountered in programming languages. And while those tags can be exemplified with examples drawing just on the "simple objects" discussed earlier in this chapter, their utility becomes, perhaps more pronounced once we have the abilities to transform objects using the isometric planar primitive operations of translation, rotation (including reflection), and scaling.

Upvotes: 0

David Storey
David Storey

Reputation: 30404

use should work just fine in WebKit/Chrome, but what you want to use for grouping is the g element. See http://www.w3.org/TR/SVG/struct.html#Groups for more information.

Upvotes: 1

Related Questions