Javascript SVG d3 |我可以动态添加内联样式吗?
我需要向SVG动态添加一个内联样式。我有1000多个SVG图表,必须另存为PNG。然后将为最终客户(不允许查看图表后面的完整数据)托管这些数据。当我转换图表时,它们必须保留格式 SVG将动态添加,我需要向每个SVG添加(相同)样式声明。这很难看,但在我生成PNG之前只是暂时的。我已经让内联样式/导出手动工作 我最近的努力是:Javascript SVG d3 |我可以动态添加内联样式吗?,javascript,css,d3.js,svg,inline,Javascript,Css,D3.js,Svg,Inline,我需要向SVG动态添加一个内联样式。我有1000多个SVG图表,必须另存为PNG。然后将为最终客户(不允许查看图表后面的完整数据)托管这些数据。当我转换图表时,它们必须保留格式 SVG将动态添加,我需要向每个SVG添加(相同)样式声明。这很难看,但在我生成PNG之前只是暂时的。我已经让内联样式/导出手动工作 我最近的努力是: addStyle(svg); function addStyle(svg) { var style = svg.append("style") .attr(
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;
}
有可能做到我想做的吗?并非所有css都适用于SVG元素。我在这里找到了一个列表:。我要做的是将每个svg放入它自己的div元素中(您可以在D3中轻松做到这一点),然后为div元素设置样式。我发现设计纯html元素的样式比SVG更容易,尤其是在有很多元素的情况下
svg.append("style").text(cssText)
我应该这样做。其中cssText是包含所有CSS的字符串
这将在DOM中创建一个样式标记,并将其文本内容设置为所需的CSS。样式标记包含CSS,您需要将其文本内容设置为所需的CSS。要将样式添加到哪个元素?谢谢您的回答,但我认为它不起作用。样式元素必须在svg中,以便svg在导出期间保持格式(例如,导出到Illustrator或转换为PNG)。谢谢-您为我节省了大量时间!