Comments (5)
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)}
/>
from uhtml.
Sorry, bad copy/paste.
same behaviour with the code you propose.
I write a code pen
from uhtml.
here it is : https://codepen.io/thipages/pen/XWXKgBw
from uhtml.
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)}
/>
`;
from uhtml.
great! Thank you
from uhtml.
Related Issues (20)
- Error with Parcel HOT 3
- Recursive fragment w/ lost lastChild during target update HOT 16
- This sequence of renders crashes in both V3 and V4 HOT 15
- Custom Element setters no longer called when uhtml renders them with a direct attribute HOT 9
- Bug? Rendering as dom element broken for 4.4.1, not 4.3.5 HOT 14
- FYI: xeito framework HOT 3
- Question about non-changing interpolated content HOT 7
- Working with inheritance HOT 5
- Renderable type doesn't include valueOf? HOT 5
- Incompatible with TypeScript when moduleResolution === nodenext HOT 6
- v4 error: Cannot set property className of #<SVGElement> which has only a getter HOT 6
- Bug: texContent -> textContent HOT 4
- Small issue with v4 HOT 9
- Cannot render empty array HOT 2
- Clarify CJS usage in v4 / CJS report with v4 HOT 1
- Typescript issues HOT 13
- Consider bringing global `uhtml` export back HOT 1
- Cannot set property list of #<HTMLInputElement> which has only a getter HOT 10
- Functions no longer allowed as Holes? HOT 3
- V4 crashes on empty array HOT 10
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from uhtml.