Merge pull request #3531 from sveltejs/gh-3522

only use setAttribute with SVG spread props
pull/3538/head
Rich Harris 5 years ago committed by GitHub
commit 686aa0bdc5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -610,12 +610,14 @@ export default class ElementWrapper extends Wrapper {
}
`);
const fn = this.node.namespace === namespaces.svg ? `set_svg_attributes` : `set_attributes`;
block.builders.hydrate.add_line(
`@set_attributes(${this.var}, ${data});`
`@${fn}(${this.var}, ${data});`
);
block.builders.update.add_block(deindent`
@set_attributes(${this.var}, @get_spread_update(${levels}, [
@${fn}(${this.var}, @get_spread_update(${levels}, [
${updates.join(',\n')}
]));
`);

@ -101,6 +101,12 @@ export function set_attributes(node: Element & ElementCSSInlineStyle, attributes
}
}
export function set_svg_attributes(node: Element & ElementCSSInlineStyle, attributes: { [x: string]: string }) {
for (const key in attributes) {
attr(node, key, attributes[key]);
}
}
export function set_custom_element_data(node, prop, value) {
if (prop in node) {
node[prop] = value;

@ -0,0 +1,7 @@
export default {
html: `
<svg height="400" width="400">
<rect x="50" y="50" width="100" height="75" fill="#ff0000"></rect>
</svg>
`
};

@ -0,0 +1,7 @@
<script>
const style = { fill: '#ff0000', x: '50', y: '50', width: '100', height: '75'};
</script>
<svg width="400" height="400">
<rect {...style}/>
</svg>
Loading…
Cancel
Save