SVG:Use

From MozillaWiki
Jump to: navigation, search

The SVG 1.1 docs on <use>

Mental Testcases

  1. svg:use linked to:
    1. same document displayed content
    2. same document undisplayed content
    3. other document
    4. foreignObject containing HTML form elements (textbox)
  2. dynamic changes
    1. attribute change within used content
    2. style change inherited from ancestor of use
    3. tree structure changes within use
    4. addition/removal of use itself
    5. non-DOM content changes (e.g. form contents)
  3. event delivery to shadow instance tree

Implementation Strategies

No Frame Tree

  1. remove multiple presentations
  2. Move SVG painting and event handling to content
    • ownership of style context also therefore goes to content
  3. Clone content for svg:use
  4. Let style contexts know they're held by content (bit)

Single Content Tree, Multiple Frame Trees

  1. leverage multiple presentations
    1. extend current architecture to support multiple primary frames for an element in the same frame tree
      1. useful for table header/footers, repeating fixed elements too
  2. use existing content-style-frame setup
  3. SVG elements whose style we need (e.g. gradients) continue to need frames
  4. hack style system to get inheritance-across-use to work (how?)

Application of style from stylesheets

Say you have:

<style>
 rect:hover ( fill: yellow; }
</style>
<rect id="rect" ...>
<use xlink:href="url(#rect" .../>

Opera highlights both rects when the first is hovered. Webkit only ever highlights the first when the first is hovered. Mozilla highlights only the rect you hover over.

Opera's justification is that technically there is only one rect. Mozilla does an actual clone.

SVG WG discussion

Alternatives

It would have been better if the spec had defined a 'clone' element, where 'clone' acts just like a 'g', but with anonymous content. If users wanted a viewport they could wrap the 'clone' in an 'svg' tag, instead of being forced to have one as 'use' forces you now.

Whereas 'clone' would create an anonymous (on non-anonymous?) content clone of the referenced content, we could also have a 'ref' element.