程序问答   发布时间:2022-06-02  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了如何使用 php 或 JavaScript 从 svg 中删除白色填充大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

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

开发过程中遇到如何使用 php 或 JavaScript 从 svg 中删除白色填充的问题如何解决?下面主要结合日常开发的经验,给出你关于如何使用 php 或 JavaScript 从 svg 中删除白色填充的解决方法建议,希望对你解决如何使用 php 或 JavaScript 从 svg 中删除白色填充有所启发或帮助;

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

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

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

updatE : 添加单字母代码

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

<?xml version="1.0" enCoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" wIDth="771pt" height="310pt" 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.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.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>

updatE 2 : 将填充属性设置为无也改变了不透明度

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

<?xml version="1.0" enCoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" wIDth="771pt" height="310pt" vIEwBox="0 0 771 310" version="1.1">
<g ID="surface1">

    <path
       ID="path94"
       d="m 68.378906,0"
       style="fill:#ff00f3;fill-opacity:1;fill-rule:evenodd;stroke:none" />
    <path
       ID="path218"
       d="m 68.542969,0"
       style="fill:none;fill-opacity:0;fill-rule:evenodd;stroke:none" />
</g>
</svg>

解决方法

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

但是,它可能不适用于您代码中的所有路径。试一试,让我知道它是如何工作的。

请注意,在合并 2 d 属性时,我已将初始的 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" width="771pt" height="310pt" 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.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.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 文件只是文本。 使用正则表达式的一种快速且非常脏的方法:

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

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

理想情况下,您会:

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

大佬总结

以上是大佬教程为你收集整理的如何使用 php 或 JavaScript 从 svg 中删除白色填充全部内容,希望文章能够帮你解决如何使用 php 或 JavaScript 从 svg 中删除白色填充所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。