我需要动态地给我的SVG添加内联样式。我有1000多个SVG图表必须保存为PNG文件,然后将其托管给最终客户(不允许看到图表背后的全部数据)。转换图表时必须保留它们的格式。
SVG将以动态方式添加,并且我需要为每个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;
}
我正在尝试的事情是否可能实现?