【发布时间】：2022-01-13 07:38:34
【问题描述】：
我正在尝试在 SVG 中添加一个 SVG，以便我可以操纵它们的填充颜色。
例如，如果我有一个正方形的 SVG，路径填充为红色，并且我想添加一个蓝色圆形的 SVG，我可以通过编写 2 个绝对位置的 SVG 来实现，但我想要里面的圆形 SVG Square SVG 将自身相乘以填充 Square SVG 空间，仅将自身限制在 Square 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 而不是那里的图像。
非常感谢任何帮助。
【问题讨论】：
-
也许
defs、symbol和use有帮助：stackoverflow.com/q/34225008/402322 -
旁注：如果需要更改，我建议您在 SVG 中使用
currentColor而不是实际颜色。这更容易，因为您只需要在 css 中更改color: green;。如果它们具有特定颜色的相同类，则无需循环多个 SVG。
标签： javascript html css svg