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

SVG d3 | can I add inline style dynamically?

本文关键字：样式 添加 d3 我可以 动态 SVG      更新时间：2023-09-26

我需要动态地向我的 SVG 添加内联样式。我有 1000+ SVG 图表，必须另存为 PNG。然后，这些将托管给最终客户（不允许他们查看图表背后的完整数据）。当我转换图表时，它们必须保持其格式。

SVG 将动态添加，我需要为每个 SVG 添加（相同的）样式声明。这很丑陋，但在我生成 PNG 之前只是暂时的。我手动使用内联样式/导出。

我最近的努力是这样的：

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

它添加一个样式/样式元素，但在注释中。它忽略了浮点数：左;无论我将其添加为 .attr（） 还是 .style（）。

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

有可能做我想做的事情吗？

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

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

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

并非所有 css 都适用于 SVG 元素。我在这里找到了一个列表：svg上的css样式。我要做的是将每个 svg 放入其自己的div 元素中（您可以在 D3 中轻松做到这一点），然后设置div 元素的样式。我发现样式纯 html 元素比 SVG 更容易，尤其是当有很多元素时。

相关文章：