文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何将SVG合并到SVG中？

问如何将SVG合并到SVG中？
EN

Stack Overflow用户
提问于 2022-01-13 07:38:34
回答 2查看 54关注 0票数 0

我试图在SVG中添加一个SVG，这样我就可以操作它们的填充颜色。

例如，如果我有一个带有红色路径填充的正方形SVG，而我想要添加一个颜色为蓝色的圆的SVG，我可以通过编写两个带有绝对位置的SVG来实现它，但是我希望在正方形SVG中的圆圈SVG乘以它自己来填充这个仅限于平方SVG区域的平方SVG空间。

就像这样。

​

这是我通过在正方形SVG中添加一个图形来实现的。比如：

​

代码语言：javascript
复制
 <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，而不是图像。

因此，我需要在父路径的同时添加另一个形状的路径。比如：

​

代码语言：javascript
复制
 <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而不是那里的图像。

任何帮助都是非常感谢的。

javascript
html
css
svg
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2022-01-13 08:36:16

直接嵌入内部SVG：

​

代码语言：javascript
复制
<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>

​

通过这种方式，可以将其控制为一个单独的项，并具有它自己的上下文。

票数 1
EN

Stack Overflow用户

发布于 2022-01-13 08:31:55

俱乐部的道路远离svg画布。此外，它比你需要填充的道路要大得多。

为了看这个俱乐部，我把它放在一个带有viewBox的符号里，用这个符号来表示我想要的位置(x，y)和大小(宽度、高度)。(下一个例子中的红色俱乐部)

我也可以用符号来构造一个图案，用这个图案来填充这个形状。

​

代码语言：javascript
复制
<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>

​

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/70692926

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档