如何使用 php 或 JavaScript 从 svg 中删除白色填充

Posted 2023-03-28

【中文标题】如何使用 php 或 JavaScript 从 svg 中删除白色填充

【英文标题】：How to remove white infills from svg using php or JavaScript

【发布时间】：2021-07-21 15:38:18

【问题描述】：

我想知道如何从这个具有透明背景的 svg 中删除白色填充。在 png 的情况下，我们有像素，并且在像素数据上使用循环，我们可以将白色像素作为目标来移除它们。但是在 svg 中我们没有像素，所以不知道如何定位那些白色填充

示例 SVG 下载链接： https://drive.google.com/file/d/1lKOhnOp0gDj6Nqqam-pDM37Lfp_0rSpl/view?usp=sharing

更新：添加单字母代码

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"   viewBox="0 0 771 310" version="1.1">
<g>

   <path
      id="path94"
      d="m 68.378906,235.66406 -0.265625,0.0117 -0.464843,0.10547 -0.214844,0.0625 -0.203125,0.0664 -0.183594,0.0859 -0.167969,0.082 -0.132812,0.082 -0.128906,0.0859 -0.117188,0.0625 -0.08594,0.0664 -0.06641,0.0508 -0.05078,0.0508 -0.03125,0.0156 -0.01563,0.0195 -0.148437,0.16406 -0.152344,0.16797 -0.117188,0.18359 -0.09766,0.1836 -0.167969,0.34765 -0.09766,0.33203 -0.07031,0.28516 -0.01563,0.13281 -0.01953,0.0977 -0.01172,0.10156 v 0.11719 l 0.01172,0.29687 0.05078,0.28516 0.06641,0.25 0.08594,0.21484 0.06641,0.16797 0.06641,0.13282 0.05078,0.0664 0.01563,0.0352 0.183594,0.19922 0.199219,0.18359 0.214843,0.16797 0.214844,0.13281 0.203125,0.0977 0.148438,0.0664 0.06641,0.0312 0.05078,0.0195 0.01563,0.0195 h 0.01953 l -0.386718,0.11328 -0.3125,0.14844 -0.28125,0.1875 -0.234375,0.16406 -0.183594,0.16406 -0.136719,0.13672 -0.06641,0.082 -0.03125,0.0156 v 0.0195 l -0.183594,0.30078 -0.148437,0.3125 -0.101563,0.30078 -0.06641,0.30078 -0.03516,0.26563 -0.01563,0.11328 v 0.10156 l -0.01563,0.0664 v 0.11718 l 0.01563,0.26953 0.03516,0.26172 0.05078,0.25391 0.06641,0.24609 0.164063,0.41797 0.08594,0.19922 0.09766,0.16797 0.101562,0.16406 0.08203,0.13672 0.101563,0.11719 0.06641,0.0977 0.06641,0.082 0.08203,0.082 0.01563,0.0195 0.199218,0.18359 0.21875,0.14844 0.234375,0.13281 0.234375,0.11719 0.214844,0.082 0.234375,0.0859 0.445313,0.11719 0.203125,0.0469 0.179687,0.0352 0.167969,0.0156 0.148437,0.0156 0.117188,0.0195 h 0.167969 l 0.316406,-0.0195 0.285156,-0.0312 0.28125,-0.0508 0.265625,-0.0508 0.230469,-0.082 0.234375,-0.082 0.21875,-0.0859 0.179687,-0.10156 0.167969,-0.0977 0.152344,-0.0859 0.117187,-0.0781 0.117188,-0.0859 0.07813,-0.0508 0.05078,-0.0469 0.05078,-0.0508 0.183594,-0.20313 0.167969,-0.19531 0.128906,-0.20312 0.117188,-0.21485 0.117187,-0.20312 0.08594,-0.21485 0.117187,-0.3789 0.04687,-0.1875 0.03516,-0.16407 0.01563,-0.15234 0.01953,-0.11719 0.01563,-0.0977 v -0.14844 l -0.01563,-0.38672 -0.07031,-0.34766 -0.09766,-0.3164 -0.101563,-0.26563 -0.09766,-0.21875 -0.101562,-0.16406 -0.06641,-0.0977 -0.01953,-0.0195 v -0.0156 l -0.230469,-0.26563 -0.25,-0.23437 -0.265625,-0.1836 -0.25,-0.16796 -0.230468,-0.11329 -0.203125,-0.0859 -0.06641,-0.0312 -0.05078,-0.0195 -0.03125,-0.0117 H 70.3125 l 0.300781,-0.13672 0.246094,-0.14844 0.21875,-0.15234 0.183594,-0.14844 0.128906,-0.13281 0.101563,-0.0977 0.06641,-0.0703 0.01953,-0.0312 0.148438,-0.23438 0.101562,-0.23437 0.07813,-0.23047 0.05078,-0.23438 0.03516,-0.18359 0.01953,-0.14844 v -0.13281 l -0.01953,-0.23437 -0.01563,-0.21875 -0.117188,-0.41407 -0.148437,-0.36328 -0.167969,-0.32031 -0.167969,-0.24609 -0.08203,-0.10157 -0.06641,-0.10156 -0.148438,-0.14844 -0.183594,-0.15234 -0.183593,-0.14844 -0.199219,-0.11719 -0.199219,-0.0977 -0.402344,-0.15235 -0.398437,-0.0977 -0.164063,-0.0508 -0.167968,-0.0156 -0.152344,-0.0195 -0.132813,-0.0117 -0.09766,-0.0195 h -0.148437 z m 0,0"
      style="fill:#ff00f3;fill-opacity:1;fill-rule:evenodd;stroke:none" />
   <path
      id="path218"
      d="m 68.542969,236.8125 h 0.136719 l 0.28125,0.0156 0.269531,0.0625 0.214844,0.0859 0.199218,0.0977 0.152344,0.10156 0.113281,0.082 0.08203,0.0703 0.01953,0.0156 0.183594,0.21484 0.132812,0.21875 0.09766,0.21485 0.07031,0.19922 0.03125,0.18359 0.03516,0.14844 v 0.13672 l -0.01953,0.26171 -0.06641,0.25391 -0.08203,0.21484 -0.101562,0.1836 -0.09766,0.14844 -0.08594,0.10156 -0.06641,0.082 -0.01563,0.0156 -0.199219,0.16797 -0.234375,0.13282 -0.214844,0.082 -0.214843,0.0664 -0.203125,0.0352 -0.148438,0.0156 -0.09766,0.0195 h -0.03516 l -0.300782,-0.0195 -0.265625,-0.0664 -0.234375,-0.082 -0.199218,-0.0977 -0.148438,-0.0859 -0.117187,-0.082 -0.08594,-0.0664 -0.01172,-0.0195 -0.167968,-0.19921 -0.132813,-0.23047 -0.08594,-0.21875 -0.06641,-0.21485 -0.03125,-0.18359 -0.01953,-0.14844 -0.01172,-0.10156 v -0.0352 l 0.01172,-0.26172 0.06641,-0.23437 0.08594,-0.21875 0.09766,-0.18359 0.08594,-0.14844 0.08203,-0.11719 0.06641,-0.0664 0.01953,-0.0156 0.214844,-0.18359 0.214844,-0.13282 0.234375,-0.0859 0.214844,-0.0625 0.199218,-0.0352 z m 0,0"
      style="fill:#ffffff;fill-opacity:0;fill-rule:evenodd;stroke:none" />
</g>
</svg>

更新 2：将填充属性设置为无也改变了不透明度

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"   viewBox="0 0 771 310" version="1.1">
<g id="surface1">

    <path
       id="path94"
       d="m 68.378906,235.66406 -0.265625,0.0117 -0.464843,0.10547 -0.214844,0.0625 -0.203125,0.0664 -0.183594,0.0859 -0.167969,0.082 -0.132812,0.082 -0.128906,0.0859 -0.117188,0.0625 -0.08594,0.0664 -0.06641,0.0508 -0.05078,0.0508 -0.03125,0.0156 -0.01563,0.0195 -0.148437,0.16406 -0.152344,0.16797 -0.117188,0.18359 -0.09766,0.1836 -0.167969,0.34765 -0.09766,0.33203 -0.07031,0.28516 -0.01563,0.13281 -0.01953,0.0977 -0.01172,0.10156 v 0.11719 l 0.01172,0.29687 0.05078,0.28516 0.06641,0.25 0.08594,0.21484 0.06641,0.16797 0.06641,0.13282 0.05078,0.0664 0.01563,0.0352 0.183594,0.19922 0.199219,0.18359 0.214843,0.16797 0.214844,0.13281 0.203125,0.0977 0.148438,0.0664 0.06641,0.0312 0.05078,0.0195 0.01563,0.0195 h 0.01953 l -0.386718,0.11328 -0.3125,0.14844 -0.28125,0.1875 -0.234375,0.16406 -0.183594,0.16406 -0.136719,0.13672 -0.06641,0.082 -0.03125,0.0156 v 0.0195 l -0.183594,0.30078 -0.148437,0.3125 -0.101563,0.30078 -0.06641,0.30078 -0.03516,0.26563 -0.01563,0.11328 v 0.10156 l -0.01563,0.0664 v 0.11718 l 0.01563,0.26953 0.03516,0.26172 0.05078,0.25391 0.06641,0.24609 0.164063,0.41797 0.08594,0.19922 0.09766,0.16797 0.101562,0.16406 0.08203,0.13672 0.101563,0.11719 0.06641,0.0977 0.06641,0.082 0.08203,0.082 0.01563,0.0195 0.199218,0.18359 0.21875,0.14844 0.234375,0.13281 0.234375,0.11719 0.214844,0.082 0.234375,0.0859 0.445313,0.11719 0.203125,0.0469 0.179687,0.0352 0.167969,0.0156 0.148437,0.0156 0.117188,0.0195 h 0.167969 l 0.316406,-0.0195 0.285156,-0.0312 0.28125,-0.0508 0.265625,-0.0508 0.230469,-0.082 0.234375,-0.082 0.21875,-0.0859 0.179687,-0.10156 0.167969,-0.0977 0.152344,-0.0859 0.117187,-0.0781 0.117188,-0.0859 0.07813,-0.0508 0.05078,-0.0469 0.05078,-0.0508 0.183594,-0.20313 0.167969,-0.19531 0.128906,-0.20312 0.117188,-0.21485 0.117187,-0.20312 0.08594,-0.21485 0.117187,-0.3789 0.04687,-0.1875 0.03516,-0.16407 0.01563,-0.15234 0.01953,-0.11719 0.01563,-0.0977 v -0.14844 l -0.01563,-0.38672 -0.07031,-0.34766 -0.09766,-0.3164 -0.101563,-0.26563 -0.09766,-0.21875 -0.101562,-0.16406 -0.06641,-0.0977 -0.01953,-0.0195 v -0.0156 l -0.230469,-0.26563 -0.25,-0.23437 -0.265625,-0.1836 -0.25,-0.16796 -0.230468,-0.11329 -0.203125,-0.0859 -0.06641,-0.0312 -0.05078,-0.0195 -0.03125,-0.0117 H 70.3125 l 0.300781,-0.13672 0.246094,-0.14844 0.21875,-0.15234 0.183594,-0.14844 0.128906,-0.13281 0.101563,-0.0977 0.06641,-0.0703 0.01953,-0.0312 0.148438,-0.23438 0.101562,-0.23437 0.07813,-0.23047 0.05078,-0.23438 0.03516,-0.18359 0.01953,-0.14844 v -0.13281 l -0.01953,-0.23437 -0.01563,-0.21875 -0.117188,-0.41407 -0.148437,-0.36328 -0.167969,-0.32031 -0.167969,-0.24609 -0.08203,-0.10157 -0.06641,-0.10156 -0.148438,-0.14844 -0.183594,-0.15234 -0.183593,-0.14844 -0.199219,-0.11719 -0.199219,-0.0977 -0.402344,-0.15235 -0.398437,-0.0977 -0.164063,-0.0508 -0.167968,-0.0156 -0.152344,-0.0195 -0.132813,-0.0117 -0.09766,-0.0195 h -0.148437 z m 0,0"
       style="fill:#ff00f3;fill-opacity:1;fill-rule:evenodd;stroke:none" />
    <path
       id="path218"
       d="m 68.542969,236.8125 h 0.136719 l 0.28125,0.0156 0.269531,0.0625 0.214844,0.0859 0.199218,0.0977 0.152344,0.10156 0.113281,0.082 0.08203,0.0703 0.01953,0.0156 0.183594,0.21484 0.132812,0.21875 0.09766,0.21485 0.07031,0.19922 0.03125,0.18359 0.03516,0.14844 v 0.13672 l -0.01953,0.26171 -0.06641,0.25391 -0.08203,0.21484 -0.101562,0.1836 -0.09766,0.14844 -0.08594,0.10156 -0.06641,0.082 -0.01563,0.0156 -0.199219,0.16797 -0.234375,0.13282 -0.214844,0.082 -0.214843,0.0664 -0.203125,0.0352 -0.148438,0.0156 -0.09766,0.0195 h -0.03516 l -0.300782,-0.0195 -0.265625,-0.0664 -0.234375,-0.082 -0.199218,-0.0977 -0.148438,-0.0859 -0.117187,-0.082 -0.08594,-0.0664 -0.01172,-0.0195 -0.167968,-0.19921 -0.132813,-0.23047 -0.08594,-0.21875 -0.06641,-0.21485 -0.03125,-0.18359 -0.01953,-0.14844 -0.01172,-0.10156 v -0.0352 l 0.01172,-0.26172 0.06641,-0.23437 0.08594,-0.21875 0.09766,-0.18359 0.08594,-0.14844 0.08203,-0.11719 0.06641,-0.0664 0.01953,-0.0156 0.214844,-0.18359 0.214844,-0.13282 0.234375,-0.0859 0.214844,-0.0625 0.199218,-0.0352 z m 0,0"
       style="fill:none;fill-opacity:0;fill-rule:evenodd;stroke:none" />
</g>
</svg>

【问题讨论】：

我怀疑您可以通过将 fill-rule="evenodd" 添加到 svg 元素来修复它。如果这不能解决您的问题，您可以编辑您的问题并添加一个字母/数字的代码吗？

@enxaneta 我注意到fill-rule="evenodd" 默认在文件中，你可以检查我添加了单字母代码。谢谢

@user889030 我认为他们让孩子们早点出去了，我还花时间写了一个问题，呈现得很好，格式也很详细，我在发布后的 5 分钟内得到了 3 次反对问题是因为我忽略了一个简单的错误。我支持你，因为我认为这是一个写得很好的问题，其他人可能会觉得有用。

@CraigStanfield 是的，他们应该知道它的 *** 不是一些英语学习论坛，在那里可以通过投票来突出语法错误

【参考方案1】：

在您问题的代码中，8 中的孔是一条不同的路径。为了使它成为一个真正的洞，我通过组合 d 属性合并了 2 条路径。

但它可能不适用于代码中的所有路径。试一试，告诉我它是如何工作的。

请注意我在合并二维属性时已将初始 m 命令更改为 M。

另外：在这种情况下，fill-rule="evenodd" 不是必需的，但它可能对其他路径有所帮助。

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"   viewBox="64 235 10 15" version="1.1">
<g id="surface1">

    <path
       id="path94"
       d="m 68.378906,235.66406 -0.265625,0.0117 -0.464843,0.10547 -0.214844,0.0625 -0.203125,0.0664 -0.183594,0.0859 -0.167969,0.082 -0.132812,0.082 -0.128906,0.0859 -0.117188,0.0625 -0.08594,0.0664 -0.06641,0.0508 -0.05078,0.0508 -0.03125,0.0156 -0.01563,0.0195 -0.148437,0.16406 -0.152344,0.16797 -0.117188,0.18359 -0.09766,0.1836 -0.167969,0.34765 -0.09766,0.33203 -0.07031,0.28516 -0.01563,0.13281 -0.01953,0.0977 -0.01172,0.10156 v 0.11719 l 0.01172,0.29687 0.05078,0.28516 0.06641,0.25 0.08594,0.21484 0.06641,0.16797 0.06641,0.13282 0.05078,0.0664 0.01563,0.0352 0.183594,0.19922 0.199219,0.18359 0.214843,0.16797 0.214844,0.13281 0.203125,0.0977 0.148438,0.0664 0.06641,0.0312 0.05078,0.0195 0.01563,0.0195 h 0.01953 l -0.386718,0.11328 -0.3125,0.14844 -0.28125,0.1875 -0.234375,0.16406 -0.183594,0.16406 -0.136719,0.13672 -0.06641,0.082 -0.03125,0.0156 v 0.0195 l -0.183594,0.30078 -0.148437,0.3125 -0.101563,0.30078 -0.06641,0.30078 -0.03516,0.26563 -0.01563,0.11328 v 0.10156 l -0.01563,0.0664 v 0.11718 l 0.01563,0.26953 0.03516,0.26172 0.05078,0.25391 0.06641,0.24609 0.164063,0.41797 0.08594,0.19922 0.09766,0.16797 0.101562,0.16406 0.08203,0.13672 0.101563,0.11719 0.06641,0.0977 0.06641,0.082 0.08203,0.082 0.01563,0.0195 0.199218,0.18359 0.21875,0.14844 0.234375,0.13281 0.234375,0.11719 0.214844,0.082 0.234375,0.0859 0.445313,0.11719 0.203125,0.0469 0.179687,0.0352 0.167969,0.0156 0.148437,0.0156 0.117188,0.0195 h 0.167969 l 0.316406,-0.0195 0.285156,-0.0312 0.28125,-0.0508 0.265625,-0.0508 0.230469,-0.082 0.234375,-0.082 0.21875,-0.0859 0.179687,-0.10156 0.167969,-0.0977 0.152344,-0.0859 0.117187,-0.0781 0.117188,-0.0859 0.07813,-0.0508 0.05078,-0.0469 0.05078,-0.0508 0.183594,-0.20313 0.167969,-0.19531 0.128906,-0.20312 0.117188,-0.21485 0.117187,-0.20312 0.08594,-0.21485 0.117187,-0.3789 0.04687,-0.1875 0.03516,-0.16407 0.01563,-0.15234 0.01953,-0.11719 0.01563,-0.0977 v -0.14844 l -0.01563,-0.38672 -0.07031,-0.34766 -0.09766,-0.3164 -0.101563,-0.26563 -0.09766,-0.21875 -0.101562,-0.16406 -0.06641,-0.0977 -0.01953,-0.0195 v -0.0156 l -0.230469,-0.26563 -0.25,-0.23437 -0.265625,-0.1836 -0.25,-0.16796 -0.230468,-0.11329 -0.203125,-0.0859 -0.06641,-0.0312 -0.05078,-0.0195 -0.03125,-0.0117 H 70.3125 l 0.300781,-0.13672 0.246094,-0.14844 0.21875,-0.15234 0.183594,-0.14844 0.128906,-0.13281 0.101563,-0.0977 0.06641,-0.0703 0.01953,-0.0312 0.148438,-0.23438 0.101562,-0.23437 0.07813,-0.23047 0.05078,-0.23438 0.03516,-0.18359 0.01953,-0.14844 v -0.13281 l -0.01953,-0.23437 -0.01563,-0.21875 -0.117188,-0.41407 -0.148437,-0.36328 -0.167969,-0.32031 -0.167969,-0.24609 -0.08203,-0.10157 -0.06641,-0.10156 -0.148438,-0.14844 -0.183594,-0.15234 -0.183593,-0.14844 -0.199219,-0.11719 -0.199219,-0.0977 -0.402344,-0.15235 -0.398437,-0.0977 -0.164063,-0.0508 -0.167968,-0.0156 -0.152344,-0.0195 -0.132813,-0.0117 -0.09766,-0.0195 h -0.148437 z
          M 68.542969,236.8125 h 0.136719 l 0.28125,0.0156 0.269531,0.0625 0.214844,0.0859 0.199218,0.0977 0.152344,0.10156 0.113281,0.082 0.08203,0.0703 0.01953,0.0156 0.183594,0.21484 0.132812,0.21875 0.09766,0.21485 0.07031,0.19922 0.03125,0.18359 0.03516,0.14844 v 0.13672 l -0.01953,0.26171 -0.06641,0.25391 -0.08203,0.21484 -0.101562,0.1836 -0.09766,0.14844 -0.08594,0.10156 -0.06641,0.082 -0.01563,0.0156 -0.199219,0.16797 -0.234375,0.13282 -0.214844,0.082 -0.214843,0.0664 -0.203125,0.0352 -0.148438,0.0156 -0.09766,0.0195 h -0.03516 l -0.300782,-0.0195 -0.265625,-0.0664 -0.234375,-0.082 -0.199218,-0.0977 -0.148438,-0.0859 -0.117187,-0.082 -0.08594,-0.0664 -0.01172,-0.0195 -0.167968,-0.19921 -0.132813,-0.23047 -0.08594,-0.21875 -0.06641,-0.21485 -0.03125,-0.18359 -0.01953,-0.14844 -0.01172,-0.10156 v -0.0352 l 0.01172,-0.26172 0.06641,-0.23437 0.08594,-0.21875 0.09766,-0.18359 0.08594,-0.14844 0.08203,-0.11719 0.06641,-0.0664 0.01953,-0.0156 0.214844,-0.18359 0.214844,-0.13282 0.234375,-0.0859 0.214844,-0.0625 0.199218,-0.0352 z m 0,0"  style="fill:#ff00f3;fill-opacity:1;fill-rule:evenodd;stroke:none" />
</g>
</svg>

【讨论】：

酷，你能分享逻辑或一些可用于合并两条路径的代码吗？谢谢 。还有一个更愚蠢的问题 svg 文件有很多路径我想知道如何找到两条路径相互重叠并且需要合并的对。

您将 2 d 属性连接起来，将初始 m 命令更改为 M。在我的回答中，我添加了一个换行符，以便您更好地理解它

另一个问题我们如何找到 svg 路径的宽度和高度

为此，您可以使用 getBBox() 方法。这将返回一个具有路径边界框的位置（x，y）和大小（宽度，高度）的对象

【参考方案2】：

SVG 文件只是文本。 一种使用正则表达式的快速且非常肮脏的方式：

preg_replace("/(<path.*fill:rgb\(100%,100%,100%\).+?)\/>/i", '', file_get_contents(__DIR__ . '/myfile.svg'));

但是，使用正则表达式解析 XML 并不是最好的，如果您在任何其他文件中的白色形状没有表示为带有 fill:rgb(100%,100%,100 %)

理想情况下你会：

使用 SimpleXML 或 DOMDocument 或第三方库将 SVG 文件作为 XML 文件打开 查找在样式中声明了填充的所有路径 使用所有不同的语法（rgb(100%, 100%, 100%)、#fff 等）查看填充值是否计算为白色 如果是，请删除该元素。

【讨论】：

这不会按原样工作。 fill 默认为黑色。所以删除它只会使孔从白色变为黑色。您需要将其替换为 fill="none"。