SVG d3 | Can I add an inline style dynamically?

Question

I need to add inline style to SVG dynamically. I have 1000+ SVG graphics that I have to save as PNG. They will then be posted to the end user (who is not allowed to see the full data behind the charts). When I convert charts, they should keep their formatting.

SVGs will be added dynamically, and I need to add the same style declaration to each of them. This is ugly, but only temporary until I create a PNG. I have a built-in style / export that works manually.

My last effort is this:

addStyle(svg); function addStyle(svg) { var style = svg.append("style") .attr("type","text/css") .attr("float","left"); } 

It adds a style / style element, but in the comments. And it ignores float: left; Do I add it as .attr () or .style ().

EDIT: Added CSS code. The CSS I need to add is for diagrams:

 g.axis path { fill: none; stroke: dimgray; stroke-width: 0.5px; } g.axis g.tick line { stroke: dimgray; stroke-width: 1px; } g.grid g.tick line { stroke: lightgray; stroke-width: 0.5px; } path.lineF.cons, path.line.cons { stroke: white; fill: none; stroke-width: 2px; } text.import { fill: #FF376F; /* pink */ } rect.import { fill: #FF376F; /* pink */ stroke: white; stroke-width: 1px; cursor: pointer; } text.export { fill: #0F86FF;/* blue */ } rect.export { fill: #0F86FF;/* blue */ stroke: white; stroke-width: 1px; cursor: pointer; } rect.prod2.area, path.area { fill: #0F86FF; opacity: 0.8; } path.areaF.prod, rect.prod.area, path.area.prod { fill: black; opacity: 0.4; } div.chart { width: 100%; } div.chart svg#svg2 { width: 100%; height: 20000px; } div.chart svg { width: 100%; height: 15000px; } text { fill: dimgray; /* font-size: 14px; */ font-size: 90%; /* font-size: 1vw; */ } text.title { /* font-size: 20px; */ font-size: 130%; font-size: 1.4vw; fill: dimgray; } text.titleMain { fill: white; font-size: 28px; /* font-size: 2.5%; font-size: 2.5vw; */ } text.label { font-size: 12px; } rect.titleRect { fill: #1D5185; } text.source { font-size: 9pt; fill: gainsboro; font-style: italic; } rect.opRate { fill: black; opacity: 0.6; } path.line.opRate { stroke: #B7FF0F; /* lime */ stroke-width: 3px; fill: none; } text.opRate { fill: #B7FF0F; } path.arP2 { stroke-width: 2px; fill: none; stroke: black; } text.gr0 { fill: #0F86FF; } text.gr2 { fill: #FF376F; } text.gr1 { fill: #06B04A; } path.gr0 { stroke: #0F86FF; stroke-width: 2px; fill: none; } path.gr2 { stroke: #FF376F; stroke-width: 2px; fill: none; } path.gr1 { stroke: #06B04A; stroke-width: 2px; fill: none; } rect.negativeGrowth { fill: black; opacity: 0.1; } 

For CSS tables:

 text.source { font-size: 9pt; fill: gainsboro; font-style: italic; } rect.th { fill: #0F86FF; stroke: white; stroke-width: 1px; } rect.td { stroke: white; stroke-width: 1px; fill: #C8E0F9; } text.tdLabel { fill: black; } text.th { fill: white; } text.tableTitle { fill: #1D5185; font-size: 1.5%; font-size: 1.5vw; } 

Can I do what I'm trying to do?

Answer 1

 svg.append("style").text(cssText) 

must do it. Where cssText will be a string containing all your CSS.

which creates a style tag in the DOM and sets its text content as necessary CSS.

Answer 2

Not all css relates to SVG elements. I found the list here: css style on svg . What I would do is put each svg in its own div element (you can easily do this in D3) and then style the div elements. I find styling pure html elements easier than SVG, especially when there are a lot of them.