SVG d3 | Могу ли я добавить встроенный стиль динамически?

Question

Мне нужно добавить встроенный стиль в SVG динамически. У меня 1000+ графиков SVG, которые я должен сохранить как PNG. Затем они будут размещены для конечного пользователя (которому не разрешено видеть полные данные за диаграммами). Когда я конвертирую диаграммы, они должны сохранять свое форматирование.

SVG будут добавлены динамически, и мне нужно добавить одно и то же объявление стиля каждому из них. Это уродливо, но только временно, пока я не создаю PNG. У меня встроенный стиль/экспорт, работающий вручную.

Моя последняя работа заключается в следующем:

addStyle(svg); 

function addStyle(svg) { 

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

Он добавляет стиль/элемент стиля, но в комментариях. И он игнорирует float: left; добавлю ли я его как .attr() или .style().

EDIT: добавлен код CSS. CSS-мне нужно добавить это для диаграмм:

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; 
} 

Для таблиц, то CSS это:

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; 
} 

Можно ли делать то, что я пытаюсь сделать?

Answer 1

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

должен это сделать. Где cssText будет строкой, содержащей все ваши CSS.

, который создает тег стиля в DOM и устанавливает его текстовое содержимое как необходимый CSS.

Answer 2

Не все css применяются к элементам SVG. Я нашел список здесь: css style on svg. То, что я сделал бы, это поместить каждый svg в свой собственный элемент div (вы можете легко сделать это в D3), а затем стилизовать элементы div. Я считаю, что стилизация чистых элементов html проще, чем SVG, особенно когда их много.