SVG d3 |インラインスタイルを動的に追加できますか？

Question

SVGに動的にインラインスタイルを追加する必要があります。私はPNGとして保存しなければならない1000以上のSVGチャートを持っています。これらは、最終顧客（チャートの背後にある完全なデータを見ることはできません）のためにホストされます。私がチャートを変換するとき、彼らは彼らのフォーマットを保つ必要があります。

SVGが動的に追加され、それぞれに（同じ）スタイル宣言を追加する必要があります。これはPNGを生成するまでは醜いですが、一時的なものです。私はインラインスタイルを持っている/手動で作業をエクスポートします。

私の最近の努力はこれです：

addStyle(svg); 

function addStyle(svg) { 

    var style = svg.append("style") 
    .attr("type","text/css") 
    .attr("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。私は何をするでしょうそれぞれのdiv要素（あなたは簡単にD3でそれを行うことができます）、各div要素にスタイルを入れます。私は純粋なhtml要素をより簡単にスタイル設定してSVGを見つけることができます。特にたくさんある場合は特にそうです。