18

For CustomElements I can do this:

class MyElement extends HTMLElement {}

Can I do the same for SVG Elements? like

class MyOwnRectangle extends SVGRectElement {}

If it works, can I trouble someone for a jsbin?

If not, why not?

This has some very good use cases like being able to store model data in the element itself. SVG manipulation is basically used in 2 major areas:

  1. Animations
  2. Diagrams like ER, Organisation Charts, Process flows etc.

A library like JointJS has its own abstractions in the form of classes (which extends a Backbone View) to store model data associated with the view (SVG diagrams on screen).

Like WebComponents can eventually replace jQuery Plugins, Framework X's components in a standard way, why not do the same for SVG?

Finally,

How is Polymer 0.5 able to do this?

Does Polymer.js support inner SVG elements?

How is this patch able to do this in Polymer 1.0?

https://github.com/Polymer/polymer/pull/3372

What is the alternative for now?

I guess we can extend HTMLElement. In our ShadowDOM use an <svg> element and then attach all the SVG tags we actually want to extend like <rect>, <polyline> etc! Perhaps a much cleaner way out of this?

Will this be implemented in the future?

Community
  • 1
  • 1
Gaurav Ramanan
  • 3,655
  • 2
  • 21
  • 29
  • You alternative is a good solution. – Supersharp Nov 05 '16 at 18:34
  • @Supersharp For cases like generating ER Diagrams, Flow charts etc its not really that good. The outer `` makes our custom components a big rectangle. Whereas extending something like a `` should mean our events etc should fire only when we click on the line not on the boundingbox (outer `svg` element) of the polyline. A lot of DOM APIs fail like `document.elementFromPoint()` etc. – Gaurav Ramanan Nov 06 '16 at 07:13

1 Answers1

5

According to the specification

If result’s namespace is not the HTML namespace, then throw a NotSupportedError.

All SVG elements are in the SVG namespace. So the specification precludes support.

Ways to store data in SVG include the the <metadata> tag and data- attributes.

Robert Longson
  • 118,664
  • 26
  • 252
  • 242
  • Thanks for your answer. How does Polymer 0.5 and the patch I linked seem to work? Are they bypassing the spec somehow? Also data attrs are available to HTML elements too. But there was a case for custom elements. Why not in SVG? – Gaurav Ramanan Nov 05 '16 at 09:05
  • I don't see any connection between polymer's patch and web components. If you want to know why something is the way it is in a w3c spec, go ask the w3c. – Robert Longson Nov 05 '16 at 09:06
  • My question is 2 fold. Yes I asked about the spec but also of workarounds – Gaurav Ramanan Nov 05 '16 at 09:12
  • I provided both, the final sentence is about alternatives. – Robert Longson Nov 05 '16 at 09:13
  • 1
    Metadata seems good but a more powerful solution would be better. If you see the way joint js operates. Its very similar to custom elements. They have their own classes with properties , templated markup and methods. They crrate classes like `erdRect` etc. Which then implement `` in their markup. But the thing is it doesn't play well with other frameworks, completely ignores all the DOM methods already in an SVG element like `appendChild` etc I was hoping for a solution which can be used like Polymer for SVG. I'll edit my question to be clearer for intent! Thanks again for your answer :) – Gaurav Ramanan Nov 05 '16 at 09:20
  • Be careful not to invalidate my answer if you edit the question. You can always ask a new question. – Robert Longson Nov 05 '16 at 09:21