search

choojs / nanohtml

:dragon: HTML template strings for the Browser with support for Server Side Rendering in Node.
MIT License
686 stars 49 forks source link

The qualified name provided ('clipPath"') contains the invalid character '"'. #144

Open dy opened 5 years ago

dy commented 5 years ago

Trying to render @stdlib/plot with nanohtml

import Plot from '@stdlib/plot/ctor'
import html from 'nanohtml'
let plot = new Plot([[0,1,2]], [[0,2,1]])
document.body.appendChild(html(plot.render('html')))

getting

Uncaught (in promise) DOMException: Failed to execute 'setAttributeNS' on 'Element': The qualified name provided ('clipPath"') contains the invalid character '"'.

The HTML generated by plot is 

<svg property="canvas" class="canvas" width="400" height="400"><defs><clippath id="964444269"><rect class="clipPath" width="290" height="240"></rect></clippath></defs><g property="graph" class="graph" transform="translate(90,80)"><rect class="background" x="0" y="0" width="290" height="240" fill="none" stroke="none"></rect><g property="marks" class="marks" clip-path="url(#964444269)"><path property="line" class="path line" d="M0,240L145,0L290,120" fill="none" stroke="#1f77b4" stroke-width="2" stroke-opacity="0.9" stroke-dasharray="-" data-label=""></path></g><g property="axis" class="axis x" fill="none" font-size="10" font-family="sans-serif" text-anchor="middle" transform="translate(0,240)"><path property="axis.domain" class="domain" fill="none" stroke="#aaa" stroke-width="1" d="M0.5,6V0.5H290.5V6"></path><g property="axis.tick" class="tick" opacity="1" transform="translate(0,0)"><line stroke="#aaa" stroke-width="1" y2="6" x1="0.5" x2="0.5"></line><text fill="#000" dy=".71em" y="9" x="0.5">0.0</text></g><g property="axis.tick" class="tick" opacity="1" transform="translate(72.5,0)"><line stroke="#aaa" stroke-width="1" y2="6" x1="0.5" x2="0.5"></line><text fill="#000" dy=".71em" y="9" x="0.5">0.5</text></g><g property="axis.tick" class="tick" opacity="1" transform="translate(145,0)"><line stroke="#aaa" stroke-width="1" y2="6" x1="0.5" x2="0.5"></line><text fill="#000" dy=".71em" y="9" x="0.5">1.0</text></g><g property="axis.tick" class="tick" opacity="1" transform="translate(217.5,0)"><line stroke="#aaa" stroke-width="1" y2="6" x1="0.5" x2="0.5"></line><text fill="#000" dy=".71em" y="9" x="0.5">1.5</text></g><g property="axis.tick" class="tick" opacity="1" transform="translate(290,0)"><line stroke="#aaa" stroke-width="1" y2="6" x1="0.5" x2="0.5"></line><text fill="#000" dy=".71em" y="9" x="0.5">2.0</text></g><text property="axis.label" class="label noselect" fill="#000" stroke="none" text-anchor="middle" transform="rotate(0)" x="145" y="45">x</text></g><g property="axis" class="axis y" fill="none" font-size="10" font-family="sans-serif" text-anchor="end" transform="translate(0,0)"><path property="axis.domain" class="domain" fill="none" stroke="none" stroke-width="1" d="M-6,240.5H0.5V0.5H-6"></path><g property="axis.tick" class="tick" opacity="1" transform="translate(0,240)"><line stroke="#aaa" stroke-width="1" x2="-6" y1="0.5" y2="0.5"></line><text fill="#000" dy=".32em" x="-9" y="0.5">0.0</text></g><g property="axis.tick" class="tick" opacity="1" transform="translate(0,180)"><line stroke="#aaa" stroke-width="1" x2="-6" y1="0.5" y2="0.5"></line><text fill="#000" dy=".32em" x="-9" y="0.5">0.5</text></g><g property="axis.tick" class="tick" opacity="1" transform="translate(0,120)"><line stroke="#aaa" stroke-width="1" x2="-6" y1="0.5" y2="0.5"></line><text fill="#000" dy=".32em" x="-9" y="0.5">1.0</text></g><g property="axis.tick" class="tick" opacity="1" transform="translate(0,60)"><line stroke="#aaa" stroke-width="1" x2="-6" y1="0.5" y2="0.5"></line><text fill="#000" dy=".32em" x="-9" y="0.5">1.5</text></g><g property="axis.tick" class="tick" opacity="1" transform="translate(0,0)"><line stroke="#aaa" stroke-width="1" x2="-6" y1="0.5" y2="0.5"></line><text fill="#000" dy=".32em" x="-9" y="0.5">2.0</text></g><text property="axis.label" class="label noselect" fill="#000" stroke="none" text-anchor="middle" transform="rotate(-90)" x="-120" y="-72">y</text></g></g><g property="annotations" class="annotations" transform="translate(0,0)"><text property="title" class="title noselect" x="235" y="40" text-anchor="middle"></text></g></svg>
goto-bus-stop commented 5 years ago

the main nanohtml module is written as a template tag so it expects an array in the first parameter. For raw HTML, the raw() function is a more appropriate option:

var raw = require('nanohtml/raw')
var domElement = raw(plot.render('html'))