SVG d3 | 我可以动态添加内联样式吗？

Question

我需要动态地给我的SVG添加内联样式。我有1000多个SVG图表必须保存为PNG文件，然后将其托管给最终客户（不允许看到图表背后的全部数据）。转换图表时必须保留它们的格式。

SVG将以动态方式添加，并且我需要为每个SVG添加（相同的）样式声明。这很丑陋，但是只是临时的，直到我生成PNG文件。我已经通过手动方式实现了内联样式/导出工作。

我最新的尝试是这样的：

addStyle(svg);

function addStyle(svg) {

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

它添加了一个风格/style元素，但是在注释中。并且无论我是通过.attr()还是.style()添加float: left;，它都会忽略它。

编辑：添加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;
}

我正在尝试的事情是否可能实现？

- emma

---

一个样式标签包含CSS，你需要将它的textContent设置为你所需的CSS。 - Robert Longson

你想要为哪个元素添加样式？ - Fawzan

Answer 1

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

应该这样做。其中 cssText 将是包含所有 CSS 的字符串。

此操作将在 DOM 中创建一个样式标签，并将其文本内容设置为所需的 CSS。

- Robert Longson

---

谢谢 - 你为我节省了很多时间！ - emma

Answer 2

并非所有的CSS都适用于SVG元素。我在这里找到了一个列表：SVG上的CSS样式。我的做法是将每个SVG放入其自己的div元素中（您可以在D3中轻松完成），然后对div元素进行样式设置。我发现对纯HTML元素进行样式设置比SVG更容易，特别是当有很多元素时。

- ocket-san

---

谢谢您的回答，但我认为这不会起作用。样式元素必须在SVG内部才能在导出时保持格式（例如，导出到Illustrator或转换为PNG）。 - emma