使用 PHP 循环遍历 SVG 属性答案

【问题标题】：Loop through SVG attributes with PHP使用 PHP 循环遍历 SVG 属性
【发布时间】：2012-12-27 09:16:23
【问题描述】：

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

0123,0456,0789

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

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

style="font-size:12px;fill:#d0d0d0;fill-rule:nonzero;stroke:#000000;stroke-opacity:1;stroke-width:0.1;stroke-miterlimit ：4；中风破折号数组：无；中风线帽：对接；标记开始：无；中风线连接：斜角” d="M 131.85275,310.64335 L 131.85275,311.08435" id="0123"

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

谢谢！布赖恩

【问题讨论】：

hd1，我想出了如何使用 javascript 解析 XML/ATOM 格式的提要，但是这种 SVG 格式看起来很不同，我需要一些指针来帮助我开始。就像我上面简要说过的那样，我不确定“样式”和“填充”是如何相关的以及访问它们的 php 术语。

标签： php xml svg domdocument

【解决方案1】：

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

This example 看起来与您想要的相似，一旦您获得样式，您就可以使用“;”explode获取样式数组，然后 join 使用新样式。

【讨论】：

【解决方案2】：

我推荐一种不同的方法：使用 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，则这些 ID 无效，因为它们需要遵循 XML 名称规则，不能以 a 开头数字。在尝试使用它们的 ID 设置这些元素的样式或尝试在它们上使用 getElementById() 时，您应该会遇到问题。因此，您可能希望将它们更改为 id0123、id0456 和 id0789

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

0123,0456,0789

会变成

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

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

【讨论】：