我需要动态地向我的 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 更容易,尤其是当有很多元素时。