3

我有一个 67 条独立路径的 SVG 图像。

是否有任何库/教程可以为每个路径创建一个单独的光栅图像，例如 PNG，并可能根据路径 ID 命名它们？

4

3 回答 3

5

谢谢大家。我最终使用了两个答案的组合。我使用 Ruby 脚本来解析 SVG 文件并为每个路径编写一个新文件，然后使用 batik 转换器从该文件生成一个 png。Nick 得到了公认的答案，因为创建单个 SVG 很容易这一关键见解。谢谢尼克！

这是脚本：

require 'rubygems'
require 'nokogiri'
file = 'dark_florida_no_numbers.svg'

file_string = IO.read(file)

reader = Nokogiri::XML::Reader(file_string)

reader.each do |node|

  if node.name == 'path'
    county = node.attributes['id']
    File.open("dark/#{county}.svg", 'w') do |f|
      f.write "<svg xmlns:svg=\"http://www.w3.org/2000/svg\" xmlns=\"http://www.w3.org/2000/svg\" version=\"1.0\" >\n  <path "
      node.attributes.each do |attr, value|
        f.write " #{attr}=\"#{value}\""
      end
      f.write "/>\n</svg>"
    end
    `java -jar b/batik-rasterizer.jar dark/#{county}.svg`
  end
end
于 2009-11-24T05:37:35.327 回答
3

我不知道有任何库可以直接支持这个确切的工作流程，但这可能是因为至少在表面上它看起来非常微不足道。假设您正在谈论顶级<path/>节点，那么这应该可以使用任何可以使用 XML 的库来完成 - 只需直接使用原始 XML 并忽略这个特定文档是 SVG 的事实。如果你有：

<svg ...>
  <path title="a" d="M 100 100 L 300 100 L 200 300 z" stroke-width="3" />
  <path title="b" d="M 200 100 L 300 100 L 200 300 z" stroke-width="3" />
  <path title="c" d="M 300 100 L 300 100 L 200 300 z" stroke-width="3" />
</svg>

你想要：

[a.svg]
<svg ...>
  <path d="M 100 100 L 300 100 L 200 300 z" stroke="blue" stroke-width="3" />
</svg>

[b.svg]
<svg ...>
  <path d="M 200 100 L 300 100 L 200 300 z" stroke="blue" stroke-width="3" />
</svg>

然后您只需要使用您选择的语言/库/工具并定义“路径”节点的路径，将它们从根文档中吸出并获取标题属性，然后将它们复制到共享相同原始文件的新文档中画布属性（如果适合您的情况 - 或将它们更改为您需要的任何内容），标题为文件名。这对于任何 XML 解析器甚至最基本的 DOM 处理 API（或 XSLT/XPATH 等）来说都应该是非常简单的。

于 2009-11-24T04:18:01.837 回答
1

Apache Batik库是用于显示和操作 SVG 内容的 Java 库。要生成 PNG 文件，您可以使用他们的DOM API将display属性设置为none除您要渲染的路径之外的所有路径，然后使用他们的Transcoder API生成位图。循环遍历 SVG 文档中的所有路径元素，并一次将display属性设置为inline一个，以便为每个路径元素生成位图。

于 2009-11-24T04:51:33.157 回答