svg exporter style for use's href
dfreeman06 opened this issue · 0 comments
dfreeman06 commented
- Make reading of the collected svg styles easier
- Build new ids for hrefs so more robust when exporting
Example diff for cleaner style tags
diff --git a/src/exporter.ts b/src/exporter.ts index 7ceb3e1..c435492 100644 --- a/src/exporter.ts +++ b/src/exporter.ts @@ -151,6 +151,14 @@ export class ELKExporterModel extends WidgetModel { this._update_timeout = setTimeout(() => this._on_layout_updated(), 1000); } + makeStyleTag(style: string) { + return !style.trim().length ? "" : `<style type="text/css"> + <![CDATA[ + ${style} + ]]> + </style>`; + } + async _on_layout_updated() { if (!this.enabled) { return; @@ -166,17 +174,13 @@ export class ELKExporterModel extends WidgetModel { const strip_ids = this.get('strip_ids'); const add_xml_header = this.get('add_xml_header'); const raw_app_css = this.app_raw_css; - const rawStyle = ` - ${STANDALONE_CSS} - ${raw_app_css.join('\n')} - ${this.get('extra_css') || ''} - `; - const style = ` - <style type="text/css"> - <![CDATA[ - ${rawStyle} - ]]> - </style>`; + const rawStyle = [ + STANDALONE_CSS, + raw_app_css.join('\n'), + this.get('extra_css') || '', + ] + + const style = rawStyle.map(this.makeStyleTag).join("\n"); const g: SVGGElement = svg.querySelector('g'); const transform = g.attributes['transform'].value; let scaleFactor = 1.0; @@ -189,13 +193,17 @@ export class ELKExporterModel extends WidgetModel { let withCSS = outerHTML .replace( /<svg([^>]+)>/, - `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width / scaleFactor + - padding} ${height / scaleFactor + padding}" $1> + `<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + viewBox="0 0 ${width / scaleFactor + padding} ${height / scaleFactor + padding}" + $1>