我有下面的 SVG。我将所有路径合并为一条。
但我的最终 SVG 被裁剪了。有人可以帮忙吗?
附上前后截图:
曾是:
<svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.5952 17.7136L16.8883 14.2878C16.7414 14.0032 16.4482 13.8138 16.1284 13.8138H12.968V10.7403C12.968 10.2664 12.5815 9.8739 12.1149 9.8739C11.6482 9.8739 11.2617 10.2664 11.2617 10.7403V14.6808C11.2617 15.1548 11.6482 15.5472 12.1149 15.5472H15.6081L17.0748 18.4992C17.2217 18.797 17.5279 18.9731 17.8347 18.9731C17.968 18.9731 18.1014 18.9461 18.2211 18.8784C18.6347 18.6615 18.8082 18.1468 18.5952 17.7136Z" fill="black"/>
<path d="M14.3166 17.0235C13.7301 17.5381 12.9832 17.8359 12.2098 17.8359C10.4499 17.8359 9.03624 16.3872 9.03624 14.6132C9.03624 13.6114 9.48937 12.6767 10.2764 12.0543C10.6498 11.7565 10.7165 11.2149 10.4232 10.8356C10.13 10.4564 9.59668 10.3887 9.22323 10.6865C8.00967 11.6343 7.31641 13.056 7.31641 14.5994C7.31641 17.3344 9.50284 19.5555 12.1967 19.5555C13.3832 19.5555 14.5165 19.1223 15.4233 18.3231C15.7832 18.0115 15.8098 17.4699 15.5035 17.1044C15.2098 16.7527 14.6635 16.7252 14.3166 17.0235Z" fill="black"/>
<path d="M13.5587 7.91063C13.5587 8.7257 12.9077 9.38628 12.1053 9.38628C11.3027 9.38628 10.6523 8.72565 10.6523 7.91063C10.6523 7.09562 11.3028 6.43445 12.1053 6.43445C12.9078 6.43445 13.5587 7.0956 13.5587 7.91063Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.34438 18.4364C7.34438 18.8637 6.99197 19.2103 6.55707 19.2103C6.12237 19.2103 5.76976 18.8639 5.76976 18.4364V13.1549C5.76976 13.0758 5.70415 13.0113 5.62374 13.0113H5.60087C5.52045 13.0113 5.45484 13.0758 5.45484 13.1549V18.4364C5.45484 18.8637 5.10242 19.2103 4.66753 19.2103C4.23263 19.2103 3.88022 18.8639 3.88022 18.4364C3.88022 15.0285 3.88022 11.3636 3.88022 7.93933C3.88022 7.86028 3.81461 7.79579 3.73419 7.79579H3.71132C3.63091 7.79579 3.5653 7.86028 3.5653 7.93933C3.5653 9.40132 3.5653 10.5185 3.5653 11.9805C3.5653 12.3153 3.28918 12.5868 2.94876 12.5868C2.60815 12.5868 2.33203 12.3153 2.33203 11.9805C2.33203 10.4045 2.33203 9.17356 2.33203 7.59752C2.33203 6.64743 3.12028 5.87258 4.08679 5.87258C5.10374 5.87258 6.12087 5.87258 7.13781 5.87258C8.10432 5.87258 8.89257 6.64743 8.89257 7.59752C8.89257 9.17356 8.89257 10.4045 8.89257 11.9805C8.89257 12.3153 8.61645 12.5868 8.27584 12.5868C7.93524 12.5868 7.65931 12.3153 7.65931 11.9805C7.65931 10.5185 7.65931 9.40132 7.65931 7.93933C7.65931 7.86028 7.5937 7.79579 7.51328 7.79579H7.49041C7.40999 7.79579 7.34438 7.86028 7.34438 7.93933C7.34438 11.3638 7.34438 15.0287 7.34438 18.4364ZM5.6123 2.44446C6.44704 2.44446 7.12394 3.10967 7.12394 3.9304C7.12394 4.75094 6.44722 5.41634 5.6123 5.41634C4.77738 5.41634 4.10067 4.75113 4.10067 3.9304C4.10067 3.10967 4.77757 2.44446 5.6123 2.44446Z" fill="black"/>
</svg>
变成:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
x="0px" y="0px"
width="24px"
height="24px"
viewBox="0 0 24 24"
id="companion-24">
<!-- Объединены все paths -->
<path fill="#000000" fill-rule="evenodd" clip-rule="evenodd" d="M18.5952 17.7136L16.8883 14.2878C16.7414 14.0032 16.4482 13.8138 16.1284 13.8138H12.968V10.7403C12.968 10.2664 12.5815 9.8739 12.1149 9.8739C11.6482 9.8739 11.2617 10.2664 11.2617 10.7403V14.6808C11.2617 15.1548 11.6482 15.5472 12.1149 15.5472H15.6081L17.0748 18.4992C17.2217 18.797 17.5279 18.9731 17.8347 18.9731C17.968 18.9731 18.1014 18.9461 18.2211 18.8784C18.6347 18.6615 18.8082 18.1468 18.5952 17.7136ZM14.3166 17.0235C13.7301 17.5381 12.9832 17.8359 12.2098 17.8359C10.4499 17.8359 9.03624 16.3872 9.03624 14.6132C9.03624 13.6114 9.48937 12.6767 10.2764 12.0543C10.6498 11.7565 10.7165 11.2149 10.4232 10.8356C10.13 10.4564 9.59668 10.3887 9.22323 10.6865C8.00967 11.6343 7.31641 13.056 7.31641 14.5994C7.31641 17.3344 9.50284 19.5555 12.1967 19.5555C13.3832 19.5555 14.5165 19.1223 15.4233 18.3231C15.7832 18.0115 15.8098 17.4699 15.5035 17.1044C15.2098 16.7527 14.6635 16.7252 14.3166 17.0235ZM13.5587 7.91063C13.5587 8.7257 12.9077 9.38628 12.1053 9.38628C11.3027 9.38628 10.6523 8.72565 10.6523 7.91063C10.6523 7.09562 11.3028 6.43445 12.1053 6.43445C12.9078 6.43445 13.5587 7.0956 13.5587 7.91063ZM7.34438 18.4364C7.34438 18.8637 6.99197 19.2103 6.55707 19.2103C6.12237 19.2103 5.76976 18.8639 5.76976 18.4364V13.1549C5.76976 13.0758 5.70415 13.0113 5.62374 13.0113H5.60087C5.52045 13.0113 5.45484 13.0758 5.45484 13.1549V18.4364C5.45484 18.8637 5.10242 19.2103 4.66753 19.2103C4.23263 19.2103 3.88022 18.8639 3.88022 18.4364C3.88022 15.0285 3.88022 11.3636 3.88022 7.93933C3.88022 7.86028 3.81461 7.79579 3.73419 7.79579H3.71132C3.63091 7.79579 3.5653 7.86028 3.5653 7.93933C3.5653 9.40132 3.5653 10.5185 3.5653 11.9805C3.5653 12.3153 3.28918 12.5868 2.94876 12.5868C2.60815 12.5868 2.33203 12.3153 2.33203 11.9805C2.33203 10.4045 2.33203 9.17356 2.33203 7.59752C2.33203 6.64743 3.12028 5.87258 4.08679 5.87258C5.10374 5.87258 6.12087 5.87258 7.13781 5.87258C8.10432 5.87258 8.89257 6.64743 8.89257 7.59752C8.89257 9.17356 8.89257 10.4045 8.89257 11.9805C8.89257 12.3153 8.61645 12.5868 8.27584 12.5868C7.93524 12.5868 7.65931 12.3153 7.65931 11.9805C7.65931 10.5185 7.65931 9.40132 7.65931 7.93933C7.65931 7.86028 7.5937 7.79579 7.51328 7.79579H7.49041C7.40999 7.79579 7.34438 7.86028 7.34438 7.93933C7.34438 11.3638 7.34438 15.0287 7.34438 18.4364ZM5.6123 2.44446C6.44704 2.44446 7.12394 3.10967 7.12394 3.9304C7.12394 4.75094 6.44722 5.41634 5.6123 5.41634C4.77738 5.41634 4.10067 4.75113 4.10067 3.9304C4.10067 3.10967 4.77757 2.44446 5.6123 2.44446Z"/>
</svg>
问题的免费翻译为什么 SVG 在合并路径后会被剪切?来自成员 @Dolly。
要解决这个问题,您需要翻转(交换路径的起点和终点)第二条路径,即绘制轮椅的路径。
否则,路径的重叠部分将为空。请在此处阅读有关 SVG 填充规则
的更多信息
成员 @enxaneta的答案的免费翻译 。
反向 SVG 路径
答案的作者enxaneta开发了
утилиту
一种反转任何路径的方法:您可以在任何编辑器中组合这些路径,而不是复杂地反转重叠元素的矢量路径。即将站立的人的躯干和椅子的图形组合成一个封闭的图形。
也许问题的作者采用了专业的图标,通常包含多个路径,并且默认设计为黑白,以便让用户有机会按原样使用颜色,或者为图标的不同部分涂上不同的颜色。
根本没有必要将几条路合二为一。在决定图标和 Web 应用程序之间的颜色匹配时,您会失去灵活性。
下面是一些如何使用 CSS 变量实现多色图标的示例