将 SVG 路径雕刻成矩形，在矩形中留下一个“孔”

Carving an SVG Path into a Rect, leaving the rect with a "hole"

本文关键字：下一个 SVG 路径      更新时间：2023-09-26

这个想法很简单：我有一个 SVG 路径和一个矩形，我需要使路径穿过矩形，由此产生的"孔"应该是透明的。

这是jsfiddle，其中包含它现在的外观的副本：https://jsfiddle.net/9u0jyhr7/embedded/result/

当前 HTML 示例： 

<div id="container">
  <svg id="theSVG" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect id="theRect" width="100%" height="100%" fill="#ffffff"></rect>
    <path id="thePath" d="M7 25.69305419921875L7 25.6875L7.00505256652832 25.6875L293.9971923828125 25.6875L294 25.6875L294 25.709388732910156L294 90.67454528808594L294 90.6875L294.0021667480469 90.6875L321.85845947265625 90.6875L321.8607482910156 90.6875L294 183.69180297851562L294 206.421142578125L294 206.42408752441406L294 206.42701721191406L294 228.93441772460938L294 228.936279296875L294 228.93814086914062L294 248.68634033203125L294 248.6875L294.0007629394531 248.6875L304.7754211425781 248.6875L304.7763671875 248.6875L304.7773132324219 248.6875L306.581298828125 248.6875L306.581298828125 248.6875L306.582275390625 248.6875L306.582275390625 248.6875L306.583251953125 248.6875L306.583251953125 248.6875L324.73028564453125 248.6875L324.7316589355469 248.6875L324.7330017089844 248.6875L330.1683044433594 248.6875L330.1697998046875 248.6875L330.1712951660156 248.6875L357.22027587890625 248.6875L357.22265625 248.6875L357.2250061035156 248.6875L360.99749755859375 248.6875L361 248.6875L507 172.48577880859375L507 342.3311767578125L507 342.3337097167969L502.9844665527344 341.6875L436.00836181640625 341.6875L436 341.6875L436 341.6893615722656L436 378.0494079589844L436 378.051513671875L436 378.0536193847656L436 406.68511962890625L507 448.48748779296875L507 448.4908447265625L507 578.6819458007812L507 578.6875L506.9949951171875 578.6875L479.0045166015625 578.6875L479 578.6875L289.9993591308594 341.6875L279.00048828125 341.6875L279 341.6875L278.99951171875 341.6875L273.92425537109375 341.6875L273.9237976074219 341.6875L273.92333984375 341.6875L270.4071350097656 341.6875L270.4067077636719 341.6875L270.4062805175781 341.6875L265.60040283203125 341.6875L265.6000061035156 341.6875L265.5995788574219 341.6875L264.8004150390625 341.6875L264.79998779296875 341.6875L264.7995910644531 341.6875L263.8423156738281 341.6875L263.8419189453125 341.6875L263.84149169921875 341.6875L263.2403869628906 341.6875L263.239990234375 341.6875L263.2395935058594 341.6875L253.1584930419922 341.6875L253.15809631347656 341.6875L253.15769958496094 341.6875L251.40040588378906 341.6875L251.39999389648438 341.6875L251.39959716796875 341.6875L245.081787109375 341.6875L245.0813446044922 341.6875L245.08090209960938 341.6875L223.00071716308594 341.6875L223 341.6875L9.995001792907715 578.6875L7.00505256652832 578.6875L7 578.6875L7 578.6819458007812 " fill="#000000"></path>
    </svg>
  </div>

这是一张图片，如果我们能开出那个洞，它可能会是什么样子：

https://i.stack.imgur.com/5fjBR.png

路径是动态生成的，可能非常复杂，所以我无法真正关注结果。

它必须在javascript中完成（或者使用一些非常聪明的样式）。

我需要结果是一个 DOM 节点，我最终可以在 z 索引之间移动（可以分组吗？用 js 计算的结果"差异"路径？）。

性能和实验性功能不是问题，这是针对 NWJS 应用程序的。

其他一些注意事项：

  • 我已经在使用jQuery，svg.js和一堆其他库，所以添加新库不是问题。

  • 如果这有助于解决问题，也可以仅用填充颜色的div 替换矩形。

  • 我已经尝试了面具和夹子，但无法找到可行的解决方案。

任何帮助表示赞赏，提前谢谢。

面具是你需要的。 我不确定你以前尝试过什么，但它应该做你想要的。

只需像这样创建一个蒙版：

<defs>
    <mask id="theMask">
        <rect width="100%" height="100%" fill="white"/>
        <path id="thePath" d="..." fill="#000000"></path>
    </mask>
</defs>
将原始路径

移动到蒙版中，或复制它并隐藏原始路径。

然后将蒙版应用于矩形

#theRect {
    mask: url(#theMask);    
}

演示小提琴在这里

相关文章：