search

observablehq / htl

A tagged template literal that allows safe interpolation of values into HTML, following the HTML5 spec
https://observablehq.com/@observablehq/htl
ISC License
305 stars 24 forks source link

Namespace-correct SVG attributes? #8

Closed mbostock closed 3 years ago

mbostock commented 4 years ago

Similar to #7, there are a few attributes that have implicit namespaces in SVG.

Attribute name Prefix Local name Namespace
xlink:actuate xlink actuate XLink namespace
xlink:arcrole xlink arcrole XLink namespace
xlink:href xlink href XLink namespace
xlink:role xlink role XLink namespace
xlink:show xlink show XLink namespace
xlink:title xlink title XLink namespace
xlink:type xlink type XLink namespace
xml:lang xml lang XML namespace
xml:space xml space XML namespace
xmlns (none) xmlns XMLNS namespace
xmlns:xlink xmlns xlink XMLNS namespace

In order to do this, we’d need to track whether we’re in the SVG namespace, because it should only apply to SVG elements.

luwes commented 4 years ago

Cool project! I've been following HTM for a while and created an implementation on top of it for Sinuous. Related to this issue, is this comment still accurate?

HTM’s approach would also need to be adapted for contextual namespaces, such as SVG, since it creates content bottom-up

It creates content bottom-up but you'll need to define the namespace either way I think, unless you create a tag name mapping of some sort which is gonna be pretty big. Or is there a way to detect this cheaply?

mbostock commented 3 years ago

@luwes Thanks. When in the HTML namespace (which is the assumed namespace when you use the html tagged template literal) only the <svg> element opens a scope for the SVG namespace; you don’t need to know all the names of SVG elements.