如何在SVG中合并SVG？-有解無憂

我正在嘗試在 SVG 中添加一個 SVG，以便我可以操縱它們的填充顏色。

例如，如果我有一個正方形的 SVG，路徑填充為紅色，并且我想添加一個藍色圓形的 SVG，我可以通過寫 2 個絕對位置的 SVG 來做到這一點，但我想要正方形 SVG 內的圓形 SVG將自身相乘以填充 Square SVG 空間，僅將自身限制為 Square SVG 的區域。

像這樣。如何在 SVG 中合并 SVG？

我通過在 Square SVG 中添加影像作為圖案來實作這一點。喜歡：

 <svg class="blowse" xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 46.000000 66.000000" preserveAspectRatio="xMidYMid meet" >
        <g transform="translate(0.000000,66.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
           <pattern id="blowse_pattern_img" patternUnits="userSpaceOnUse" width="100%" height="100%">
               <image id="blowse_img" href="https://harryatwork.com/vinay/images/club.png" x="0" y="0" width="50px" height="50px"></image>
           </pattern>
           <path style="fill:red;" class="path_blowse" d="M343 619 c-6 -6 -26 -12 -44 -13 -127 -11 -279 -102 -266 -158 7 -29 67 -196 94 -263 11 -27 26 -69 32 -92 7 -24 20 -47 30 -53 17 -9 19 -4 23 63 3 55 11 88 36 138 28 58 43 75 110 125 l79 59 -18 29 c-16 26 -26 60 -45 154 -5 24 -14 28 -31 11z" />
           <path style="fill:url(#blowse_pattern_img)" class="path_blowse_img" d="M343 619 c-6 -6 -26 -12 -44 -13 -127 -11 -279 -102 -266 -158 7 -29 67 -196 94 -263 11 -27 26 -69 32 -92 7 -24 20 -47 30 -53 17 -9 19 -4 23 63 3 55 11 88 36 138 28 58 43 75 110 125 l79 59 -18 29 c-16 26 -26 60 -45 154 -5 24 -14 28 -31 11z" />
       </g>
    </svg>

但是，使用 JQuery 我可以操作父 SVG 的填充，但我無法對剛剛添加的影像做任何事情。

所以要操縱孩子的顏色，我需要它是一個 SVG 而不是一個影像。

因此，我需要添加該形狀的另一條路徑以及父路徑。喜歡：

 <svg class="blowse" xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 46.000000 66.000000" preserveAspectRatio="xMidYMid meet" >
        <g transform="translate(0.000000,66.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
           <path class="path_blowse" d="M343 619 c-6 -6 -26 -12 -44 -13 -127 -11 -279 -102 -266 -158 7 -29 67 -196 94 -263 11 -27 26 -69 32 -92 7 -24 20 -47 30 -53 17 -9 19 -4 23 63 3 55 11 88 36 138 28 58 43 75 110 125 l79 59 -18 29 c-16 26 -26 60 -45 154 -5 24 -14 28 -31 11z" />
          <path xmlns="http://www.w3.org/2000/svg" d="M5656 11870 c-498 -45 -890 -217 -1275 -559 -403 -360 -677 -1053 -698 -1766 -11 -366 36 -549 248 -980 161 -328 202 -435 165 -435 -27 0 -153 43 -311 105 -327 130 -593 184 -1015 204 -340 17 -465 -6 -714 -131 -207 -104 -385 -237 -592 -443 -242 -241 -393 -448 -524 -720 -169 -349 -207 -506 -217 -886 -9 -328 17 -544 87 -744 38 -108 183 -418 247 -530 358 -624 949 -1041 1653 -1165 159 -28 479 -38 642 -20 531 58 1102 312 1543 684 156 132 362 348 474 498 24 32 144 207 267 390 149 221 230 333 242 333 26 0 33 -60 26 -250 -12 -385 -35 -617 -85 -870 -143 -725 -468 -1336 -988 -1855 -181 -181 -280 -265 -440 -371 -268 -178 -520 -276 -1206 -468 -471 -132 -622 -190 -709 -274 -43 -41 -75 -112 -58 -129 14 -14 479 -27 1312 -39 1056 -14 5327 -7 5545 10 308 23 350 44 296 149 -45 86 -120 127 -316 172 -414 94 -887 235 -1170 348 -376 151 -662 347 -970 663 -436 449 -744 1015 -879 1619 -52 236 -112 621 -146 938 -20 197 -27 422 -12 422 13 0 136 -168 282 -386 263 -392 453 -616 720 -848 515 -447 1168 -722 1765 -743 363 -12 718 68 1070 242 267 132 454 266 657 472 204 206 327 383 473 678 109 219 146 325 177 497 21 113 23 154 23 488 0 306 -3 383 -18 479 -33 205 -86 358 -212 613 -128 259 -262 444 -461 638 -185 180 -312 270 -539 380 -313 153 -572 207 -933 197 -314 -9 -487 -53 -857 -217 -210 -93 -349 -150 -365 -150 -32 0 17 130 174 463 169 356 219 499 251 712 47 316 -20 800 -167 1195 -119 320 -280 574 -499 785 -361 349 -729 524 -1240 591 -145 18 -575 27 -723 14z"/> 
       </g>
    </svg>

什么都沒做。

希望我在解釋我的查詢時很清楚。

作業小提琴

我需要一個 SVG 而不是那里的影像。

任何幫助是極大的贊賞。

uj5u.com熱心網友回復：

直接嵌入內部 SVG：

<svg class="blowse" xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 46.000000 66.000000" preserveAspectRatio="xMidYMid meet" >
  <g transform="translate(0.000000,66.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
    <pattern id="blowse_pattern_img" patternUnits="userSpaceOnUse" width="100%" height="100%">
      <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 500 500">
        <circle cx="250" cy="250" r="210" fill="#fff" stroke="#000" stroke-width="8"/>
      </svg>
    </pattern>
    <path style="fill:red;" class="path_blowse" d="M343 619 c-6 -6 -26 -12 -44 -13 -127 -11 -279 -102 -266 -158 7 -29 67 -196 94 -263 11 -27 26 -69 32 -92 7 -24 20 -47 30 -53 17 -9 19 -4 23 63 3 55 11 88 36 138 28 58 43 75 110 125 l79 59 -18 29 c-16 26 -26 60 -45 154 -5 24 -14 28 -31 11z" />
    <path style="fill:url(#blowse_pattern_img)" class="path_blowse_img" d="M343 619 c-6 -6 -26 -12 -44 -13 -127 -11 -279 -102 -266 -158 7 -29 67 -196 94 -263 11 -27 26 -69 32 -92 7 -24 20 -47 30 -53 17 -9 19 -4 23 63 3 55 11 88 36 138 28 58 43 75 110 125 l79 59 -18 29 c-16 26 -26 60 -45 154 -5 24 -14 28 -31 11z" />
  </g>
</svg>

通過這種方式，可以將其作為具有自己背景關系的單獨專案進行控制。

uj5u.com熱心網友回復：

俱樂部路徑遠離 svg 畫布。此外比您需要填充圖案的路徑大得多。

為了看到俱樂部，我將它放在一個帶有 viewBox 的符號中，并使用我想要的位置（x，y）和大小（寬度，高度）的符號。（下一個示例中的紅色俱樂部）

我也可以使用符號來構建圖案并使用圖案來填充形狀。

<svg class="blowse" xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 46.000000 66.000000" preserveAspectRatio="xMidYMid meet">

  <g transform="translate(0.000000,66.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
    <path fill="url(#blowse_pattern_img)" class="path_blowse" d="M343 619 c-6 -6 -26 -12 -44 -13 -127 -11 -279 -102 -266 -158 7 -29 67 -196 94 -263 11 -27 26 -69 32 -92 7 -24 20 -47 30 -53 17 -9 19 -4 23 63 3 55 11 88 36 138 28 58 43 75 110 125 l79 59 -18 29 c-16 26 -26 60 -45 154 -5 24 -14 28 -31 11z" />
    <use href="#club" x="100" y="400" width="30" height="30" fill="red" />

  </g>


<defs>
  <pattern id="blowse_pattern_img" patternUnits="userSpaceOnUse" width="30" height="30">
    <use href="#club" width="20" height="20" fill="gold" />
  </pattern>
  <symbol viewBox="720 1440 10530 10530" id="club">
    <path xmlns="http://www.w3.org/2000/svg" d="M5656 11870 c-498 -45 -890 -217 -1275 -559 -403 -360 -677 -1053 -698 -1766 -11 -366 36 -549 248 -980 161 -328 202 -435 165 -435 -27 0 -153 43 -311 105 -327 130 -593 184 -1015 204 -340 17 -465 -6 -714 -131 -207 -104 -385 -237 -592 -443 -242 -241 -393 -448 -524 -720 -169 -349 -207 -506 -217 -886 -9 -328 17 -544 87 -744 38 -108 183 -418 247 -530 358 -624 949 -1041 1653 -1165 159 -28 479 -38 642 -20 531 58 1102 312 1543 684 156 132 362 348 474 498 24 32 144 207 267 390 149 221 230 333 242 333 26 0 33 -60 26 -250 -12 -385 -35 -617 -85 -870 -143 -725 -468 -1336 -988 -1855 -181 -181 -280 -265 -440 -371 -268 -178 -520 -276 -1206 -468 -471 -132 -622 -190 -709 -274 -43 -41 -75 -112 -58 -129 14 -14 479 -27 1312 -39 1056 -14 5327 -7 5545 10 308 23 350 44 296 149 -45 86 -120 127 -316 172 -414 94 -887 235 -1170 348 -376 151 -662 347 -970 663 -436 449 -744 1015 -879 1619 -52 236 -112 621 -146 938 -20 197 -27 422 -12 422 13 0 136 -168 282 -386 263 -392 453 -616 720 -848 515 -447 1168 -722 1765 -743 363 -12 718 68 1070 242 267 132 454 266 657 472 204 206 327 383 473 678 109 219 146 325 177 497 21 113 23 154 23 488 0 306 -3 383 -18 479 -33 205 -86 358 -212 613 -128 259 -262 444 -461 638 -185 180 -312 270 -539 380 -313 153 -572 207 -933 197 -314 -9 -487 -53 -857 -217 -210 -93 -349 -150 -365 -150 -32 0 17 130 174 463 169 356 219 499 251 712 47 316 -20 800 -167 1195 -119 320 -280 574 -499 785 -361 349 -729 524 -1240 591 -145 18 -575 27 -723 14z" />
  </symbol>
</defs>
</svg>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/410801.html

標籤：

上一篇：如何更改此SVG的顏色？

下一篇：元素和svg形狀之間的白線