Skip to content

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

@dy

Description

@dy

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>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions