Question

减去组图层时遇到问题。

示例SVG：

<?xml version="1.0" encoding="UTF-8"?>
<svg height="25cm" width="25cm" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title></title>
    <desc></desc>
    <defs></defs>
    <g transform="translate(945,0) rotate(0) scale(-1, 1)">
        <g transform="scale(0.0784423828125) translate(3653.5294117647, 1734.7764705882)">
            <path transform="translate(0,0) rotate(0) scale(1, -1)" d="M156 1167q41 203 57 267h1061q-16 -63 -57 -267h-381l-248 -1167h-297l248 1167h-383z"></path>
            <path transform="translate(1124,0) rotate(0) scale(1, -1)" d="M41 0l305 1434h879l-58 -269h-569l-61 -291h532q-8 -29 -57 -268h-533l-69 -327h585l-59 -279h-895z"></path>
            <path transform="translate(2293,0) rotate(0) scale(1, -1)" d="M53 424h293q-3 -17 -3 -33q1 -66 61 -105q76 -48 190 -48q317 0 317 213q0 47 -23.5 77.5t-73.5 46t-84 20.5t-97 11q-195 14 -320 93t-125 241q0 176 96.5 299t239 174t314.5 51q229 0 364 -106q101 -79 101 -224q0 -48 -11 -104h-278q1 9 1 17q-1 70 -61 107 q-68 42 -172 42q-109 0 -196.5 -56.5t-87.5 -148.5q0 -70 61.5 -99.5t179.5 -43.5q125 -12 209 -32.5t159 -65.5t101 -128q14 -43 14 -95q0 -50 -12 -109q-84 -449 -671 -449q-152 0 -271 46q-118 47 -182 153q-43 72 -43 163q0 44 10 93z"></path>
            <path transform="translate(3616,0) rotate(0) scale(1, -1)" d="M156 1167q41 203 57 267h1061q-16 -63 -57 -267h-381l-248 -1167h-297l248 1167h-383z"></path>
        </g>
        <g transform="scale(0.0784423828125) translate(3740.2682352941, 1821.5152941176)" fill="#4162AC">
            <path transform="translate(0,0) rotate(0) scale(1, -1)" d="M156 1167q41 203 57 267h1061q-16 -63 -57 -267h-381l-248 -1167h-297l248 1167h-383z"></path>
            <path transform="translate(1124,0) rotate(0) scale(1, -1)" d="M41 0l305 1434h879l-58 -269h-569l-61 -291h532q-8 -29 -57 -268h-533l-69 -327h585l-59 -279h-895z"></path>
            <path transform="translate(2293,0) rotate(0) scale(1, -1)" d="M53 424h293q-3 -17 -3 -33q1 -66 61 -105q76 -48 190 -48q317 0 317 213q0 47 -23.5 77.5t-73.5 46t-84 20.5t-97 11q-195 14 -320 93t-125 241q0 176 96.5 299t239 174t314.5 51q229 0 364 -106q101 -79 101 -224q0 -48 -11 -104h-278q1 9 1 17q-1 70 -61 107 q-68 42 -172 42q-109 0 -196.5 -56.5t-87.5 -148.5q0 -70 61.5 -99.5t179.5 -43.5q125 -12 209 -32.5t159 -65.5t101 -128q14 -43 14 -95q0 -50 -12 -109q-84 -449 -671 -449q-152 0 -271 46q-118 47 -182 153q-43 72 -43 163q0 44 10 93z"></path>
            <path transform="translate(3616,0) rotate(0) scale(1, -1)" d="M156 1167q41 203 57 267h1061q-16 -63 -57 -267h-381l-248 -1167h-297l248 1167h-383z"></path>
        </g>
    </g>
</svg>

尝试使用面具但不起作用。有人可以告诉你怎么做吗？

Answer 1

您可以使用Mask。

尝试以下代码，它正在运作。

查看评论以获取更多信息。

<?xml version="1.0" encoding="UTF-8"?>
<svg height="25cm" width="25cm" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title></title>
    <desc></desc>
    <defs></defs>


    <!--CREATE A MASK AND APPLY THIS MASK TO WHICH GROUP YOU WANT-->
    <mask id="Mask" x="0" y="0" width="1" height="1"
        maskContentUnits="objectBoundingBox">
        <rect x="0" y="0" width="1" height="1"
            style="fill-opacity: 0.25; fill: white;"/>
    </mask>


    <g transform="translate(945,0) rotate(0) scale(-1, 1)">

    <g transform="scale(0.0784423828125) translate(3653.5294117647, 1734.7764705882)">
        <path transform="translate(0,0) rotate(0) scale(1, -1)" d="M156 1167q41 203 57 267h1061q-16 -63 -57 -267h-381l-248 -1167h-297l248 1167h-383z"></path>
        <path transform="translate(1124,0) rotate(0) scale(1, -1)" d="M41 0l305 1434h879l-58 -269h-569l-61 -291h532q-8 -29 -57 -268h-533l-69 -327h585l-59 -279h-895z"></path>
        <path transform="translate(2293,0) rotate(0) scale(1, -1)" d="M53 424h293q-3 -17 -3 -33q1 -66 61 -105q76 -48 190 -48q317 0 317 213q0 47 -23.5 77.5t-73.5 46t-84 20.5t-97 11q-195 14 -320 93t-125 241q0 176 96.5 299t239 174t314.5 51q229 0 364 -106q101 -79 101 -224q0 -48 -11 -104h-278q1 9 1 17q-1 70 -61 107 q-68 42 -172 42q-109 0 -196.5 -56.5t-87.5 -148.5q0 -70 61.5 -99.5t179.5 -43.5q125 -12 209 -32.5t159 -65.5t101 -128q14 -43 14 -95q0 -50 -12 -109q-84 -449 -671 -449q-152 0 -271 46q-118 47 -182 153q-43 72 -43 163q0 44 10 93z"></path>
        <path transform="translate(3616,0) rotate(0) scale(1, -1)" d="M156 1167q41 203 57 267h1061q-16 -63 -57 -267h-381l-248 -1167h-297l248 1167h-383z"></path>
    </g>

        <!--APPLY MASK STYLE TO THIS GROUP-->
        <g transform="scale(0.0784423828125) translate(3740.2682352941, 1821.5152941176)" fill="#4162AC" style="mask: url(#Mask);">
            <path transform="translate(0,0) rotate(0) scale(1, -1)" d="M156 1167q41 203 57 267h1061q-16 -63 -57 -267h-381l-248 -1167h-297l248 1167h-383z"></path>
            <path transform="translate(1124,0) rotate(0) scale(1, -1)" d="M41 0l305 1434h879l-58 -269h-569l-61 -291h532q-8 -29 -57 -268h-533l-69 -327h585l-59 -279h-895z"></path>
            <path transform="translate(2293,0) rotate(0) scale(1, -1)" d="M53 424h293q-3 -17 -3 -33q1 -66 61 -105q76 -48 190 -48q317 0 317 213q0 47 -23.5 77.5t-73.5 46t-84 20.5t-97 11q-195 14 -320 93t-125 241q0 176 96.5 299t239 174t314.5 51q229 0 364 -106q101 -79 101 -224q0 -48 -11 -104h-278q1 9 1 17q-1 70 -61 107 q-68 42 -172 42q-109 0 -196.5 -56.5t-87.5 -148.5q0 -70 61.5 -99.5t179.5 -43.5q125 -12 209 -32.5t159 -65.5t101 -128q14 -43 14 -95q0 -50 -12 -109q-84 -449 -671 -449q-152 0 -271 46q-118 47 -182 153q-43 72 -43 163q0 44 10 93z"></path>
            <path transform="translate(3616,0) rotate(0) scale(1, -1)" d="M156 1167q41 203 57 267h1061q-16 -63 -57 -267h-381l-248 -1167h-297l248 1167h-383z"></path>
        </g>
    </g>
</svg>

从组中减去组

1 个答案: