0

使用 PHP，我需要读入 id 的 csv 文件...

0123,0456,0789

...然后加载一个 SVG XML 图形文件并更改这些特定 id 的颜色属性。

SVG 文件中的每个多边形都有如下记录。我需要将每个匹配记录中的填充：值从 #d0d0d0 更改为 #FF0000。外层循环当然是 id，内层是 SVG 文件的每条记录。

style="font-size:12px; fill:#d0d0d0 ;fill-rule:nonzero;stroke:#000000;stroke-opacity:1;stroke-width:0.1;stroke-miterlimit:4;stroke-dasharray:none;stroke -linecap:butt;marker-start:none;stroke-linejoin:bevel" d="M 131.85275,310.64335 L 131.85275,311.08435" id="0123"

对于我的编程技能爱好者水平，所需循环的一般 PHP 结构以及如何访问样式的特定属性的提示将非常有帮助！

谢谢！布赖恩

4

2 回答 2

0

我推荐一种不同的方法：使用 CSS 更改颜色。那里不需要循环遍历 SVG 元素。为了能够做到这一点，您应该稍微清理一下 SVG 文件，这也会使其更紧凑。

据我了解，您所有要着色的元素都具有与内容相同的样式属性

font-size:12px;fill:#d0d0d0;fill-rule:nonzero;stroke:#000000;stroke-opacity:1;stroke-width:0.1;stroke-miterlimit:4;stroke-dasharray:none;stroke-linecap:butt;marker-start:none;stroke-linejoin:bevel

删除那些属性，用合理的class属性替换它们。假设这些路径是地图上的国家，那么让我们给它们一个属性class="country"。然后使用一个 CSS 规则为所有这些设置样式，例如：

.country {
  fill:  #d0d0d0;
  fill-rule:nonzero;
  stroke:#000000;
  stroke-opacity:1;
  stroke-width:0.1;
  stroke-miterlimit:4;
  stroke-dasharray:none;
  stroke-linecap:butt;
  marker-start:none;
  stroke-linejoin:bevel;
}

我离开了该font-size属性，因为这与<path>元素无关。（可能您可以进一步简化这一点，因为许多属性重复默认值，除非您在路径的父元素中更改这些属性，否则fill-rule, stroke-opacity, stroke-miterlimit,stroke-dasharray和是多余的stroke-linecap，marker-start但不要伤害任何人。）

还有一个问题：如果文件中的 ID 看起来确实像0123,0456或0789，那么它们是无效的，因为它们需要遵循 XML 名称的规则，不能以数字开头。在尝试使用它们的 ID 设置这些元素的样式或尝试getElementById()在它们上使用它们时，您应该会遇到问题。因此，您可能希望将它们更改为类似id0123,id0456和id0789

现在，您可以从 CSV 数据中动态添加一些 CSS。

0123,0456,0789

会成为

#id0123,#id0456,#id0789 {fill:#FF0000}

你就完成了。CSS 可以添加到<style>SVG 文件的元素中，或者您创建一个单独的 CSS 文件并从 SVG 中引用它。这样，在动态更改颜色时，您不必对 SVG 进行任何更改。如果您在 HTML 中使用内联 SVG 数据，您还可以将其添加到<style>HTML 页面中的元素或 HTML 引用的 CSS 文件中。

于 2013-01-13T11:30:03.623 回答
0

DOMDocument对象具有getelementbyid、getAttribute 和 setAttribute，它们应该可以让您更改 xml。

这个例子看起来和你想要的很相似，一旦你得到了你可以explode用 ';'的样式 获取样式数组，然后join使用新样式。

于 2013-01-13T06:04:16.277 回答