Question

我正致力于在momoment创建一个svg平面布置图，它由多个路径组成，这些路径组合在一起，代表门口的路径中断。

然而，我尝试填充我的小组，我没有得到完整的填充，我得到部分填充，由等距形状组成，即使我有非连接路径，有没有办法完全填充组？

我的代码，

<g id="Group" stroke="none" stroke-width="1" fill="blue" fill-rule="evenodd" transform="translate(66.000000, 103.000000)">
    <path d="M184.068359,305.802734 L143.80664,305.802734" id="Path-17" stroke="#979797"></path>
    <polyline id="Path-18" stroke="#979797" points="93.7480469 305.845703 0.466745757 305.845703 0.466745757 92.1182094 141.39461 92.1182094 195.207031 65.8398438 195.207031 54.2361072 188.045332 54.2361072"></polyline>
    <polyline id="Path-19" stroke="#979797" points="188.199219 6.6484375 207.78952 6.6484375 208.511719 0.703125 284.00589 0.703125 284.00589 5.9776195"></polyline>
    <polyline id="Path-20" stroke="#979797" points="284.890625 55.1621094 283.505859 134.390625 183.903627 134.390625 183.903627 306.27391"></polyline>
</g>

我想要做的是将红色笔划中的所有内容填充为蓝色，但是要将其填满？

https://jsbin.com/reyunufeno/edit?html,output

Answer 1

在下面的代码中，我将所有形状元素合并为一条路径，每条路径都以新的“M”开头，这使得“笔”在门口“跳”。对于原版，我将笔划着红色并使填充“无”。然后我只是复制了原来的路径并删除了内部的“M”以“连接”门口的地板轮廓，消除了副本的笔划并用蓝色填充了副本。

<svg width="300" height="320">
  <g transform="translate(5,5)">
    <path stroke="red" stroke-width="10" fill="none" d="M184.068359,305.802734 L143.80664,305.802734 M93.7480469 305.845703 0.466745757 305.845703 0.466745757 92.1182094 141.39461 92.1182094 195.207031 65.8398438 195.207031 54.2361072 188.045332 54.2361072 M188.199219 6.6484375 207.78952 6.6484375 208.511719 0.703125 284.00589 0.703125 284.00589 5.9776195 M284.890625 55.1621094 283.505859 134.390625 183.903627 134.390625 183.903627 306.27391"/>
    <path fill="blue"                                d="M184.068359,305.802734 L143.80664,305.802734  93.7480469 305.845703 0.466745757 305.845703 0.466745757 92.1182094 141.39461 92.1182094 195.207031 65.8398438 195.207031 54.2361072 188.045332 54.2361072  188.199219 6.6484375 207.78952 6.6484375 208.511719 0.703125 284.00589 0.703125 284.00589 5.9776195  284.890625 55.1621094 283.505859 134.390625 183.903627 134.390625 183.903627 306.27391"/>
  </g>
</svg>

svg填充分组折线以形成填充形状

1 个答案: