Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
dy opened this issue Jan 19, 2019 · 1 comment
Open

Comments

@dy
Copy link

dy commented Jan 19, 2019

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>
@dy dy changed the title browser.js:79 Uncaught (in promise) DOMException: Failed to execute 'setAttributeNS' on 'Element': The qualified name provided ('clipPath"') contains the invalid character '"'. The qualified name provided ('clipPath"') contains the invalid character '"'. Jan 19, 2019
@goto-bus-stop
Copy link
Member

goto-bus-stop commented Jan 19, 2019

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'))

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants