Description

thipages

opened on Jun 13, 2020

Issue body actions

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();

Activity

1. WebReflection commented on Jun 13, 2020

   

   WebReflection

   on Jun 13, 2020

   Owner

   More actions

   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)}
           />
2. thipages commented on Jun 13, 2020

   

   thipages

   on Jun 13, 2020

   Author

   More actions

   Sorry, bad copy/paste.
   same behaviour with the code you propose.
   I write a code pen
3. thipages commented on Jun 13, 2020

   

   thipages

   on Jun 13, 2020

   Author

   More actions

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

   closed this as completedin 56e99a7on Jun 14, 2020
5. WebReflection commented on Jun 14, 2020

   

   WebReflection

   on Jun 14, 2020

   Owner

   More actions

   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)}
     />
   `;
6. WebReflection

   added a commit that references this issue on Jun 14, 2020

   Same fix for WebReflection/uhtml#14

   341fd4a
7. thipages commented on Jun 14, 2020

   

   thipages

   on Jun 14, 2020

   Author

   More actions

   great! Thank you

Issue actions