SVG object loading

Hi,
I tried to render an interactive svg with the following code
the issue : it loops (n loaded on console, blinking on screen).
Thank you.
I can write a code pen if needed.

const dispatch=(id, detail)=>()=>document.dispatchEvent(new CustomEvent(id, {detail:detail}))
const svg_test=(id,path)=> html`
        <object
            type="image/svg+xml"
            .data=${path}
            onload=${dispatch(id)}
        </object>
`;
const m= {
    id:'_svg_',
    path:'a valid path'
}
const update=()=> {
    render(document.body, svg_test(m.id, m.path));
}
document.addEventListener(m.id, ()=> {
    console.log("loaded");
    // do some work here like changing the svgs height/scale
    update();
});
update();

your svg_test is broken ... it doesn't close the initial object.

would this work instead?

const svg_test=(id,path)=> html`
        <object
            type="image/svg+xml"
            .data=${path}
            onload=${dispatch(id)}
        />

Sorry, bad copy/paste.
same behaviour with the code you propose.
I write a code pen

here it is : https://codepen.io/thipages/pen/XWXKgBw

OK, this is an expected behavior, see the following code that uses zero libraries:

document.body.innerHTML = `<object height="100px" type="image/svg+xml"></object>`;
const object = document.body.firstElementChild;
const m= {
  id: '_svg_',
  path: 'https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/ruby.svg'
};
const update = () => {
  object.onload = () => {
    document.dispatchEvent(new CustomEvent(m.id, {detail: null}));
  };
  object.data = m.path;
};
document.addEventListener(m.id, () => {
  setTimeout(()=> {
    console.log("loaded");
    // do some work here like changing the svgs height/scale
    update();
  },1000);
});
update();

setting the .data over and over makes it flick, but admittedly there was no way to pass data as attribute, but nodes that have a special data meaning should have the ability to use that indeed.

So, latest version of uhtml allows you to use data=${...} instead of .data=${...} for nodes where data has a special meaning, so that the dataset helper is not triggered.

TL;DR this now works:

const svg_test=(id,path)=> html`
  <object
    type="image/svg+xml"
    data=${path}
    onload=${dispatch(id)}
  />
`;

Same fix for WebReflection/uhtml#14

great! Thank you

Navigation Menu

Repository navigation

SVG object loading #14

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

SVG object loading #14

Description

Activity

WebReflection commented on Jun 13, 2020

thipages commented on Jun 13, 2020

thipages commented on Jun 13, 2020

WebReflection commented on Jun 14, 2020

thipages commented on Jun 14, 2020

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions