I need to add an inline style to my SVG dynamically. I have 1000+ SVG charts that I must save as PNGs. These will then be hosted for the end customer (who is not allowed to see the full data behind the charts). When I convert the charts they must keep their formatting.
The SVGs will be added dynamically and I need to add the (same) style declaration to each one. This is ugly but only temporary till I generate the PNGs. I've got inline style / export working manually.
My latest 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 within comments. And it ignores the float: left; whether I add it as .attr() or .style().
EDIT: added CSS code. The CSS I need to add is this for the charts:
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 the tables, the CSS is this:
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;
}
Is it possible to do what I'm trying to do?
And since SVG sits in the DOM, we can use attr () and append () just like we did for HTML elements. Let's learn about some of the most used SVG elements in visualizations and how to create and apply styling to them using D3 library. An SVG line element is represented by <line> tag.
Step 1 − Create a container to hold the SVG image as given below. Step 2 − Select the SVG container using the select () method and inject the SVG element using the append () method. Add the attributes and styles using the attr () and the style () methods. Step 3 − Similarly, add the line element inside the svg element as shown below.
Think of SVG as a canvas to paint on (and don't confuse it with HTML <canvas> - that's a different element!). You need to specify a width and height for your canvas. And all your SVG elements like <rect>, <line>, <circle>, <text> would go inside this <svg> tag.
Recall that an SVG circle can be created as such: Next open the Developer Tools (Webkit Inspector). Then type the following long line into the JavaScript Console (note that the code sample below scrolls to the right): This will give you the following: Congratulations - you've added an SVG element to the DOM using D3.js!
svg.append("style").text(cssText)
should do it. Where cssText would be a string containing all your CSS.
that creates a style tag in the DOM and sets its text content to be the CSS you need.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With