svg嵌套解决内部图形超出viewbox的问题

最近学习在html中写svg矢量图时遇到了svg标签下的图形超出viewbox的问题,虽然使用path可以完美的避免这个问题,但是path使用起来较为复杂,很多一般图形的部分曲线就可以完成。这是我想要制作的图形,一个CS的图案。字母C由一个椭圆构成,s由两个path构成。而c和s我使用了svg嵌套,通过定义height与width确保只显示在背景图上的内容。

<svg version="1.0" xmlns="http://www.w3.org/2000/svg"   viewBox="0 0 1160 1160" >
   <g>
	   <rect rx="200" ry="200" width="1160" height="1160" fill="#CD853F"/>
	   
	   <svg width="1160" height="1160">
	   <ellipse cx="920" cy="600" rx="800" ry="800" fill-opacity="0" style="stroke:#5468FF;stroke-width:130"/>
	   </svg>

		<svg width="1160" height="1160">
     	<path d="M900 -100 Q 400 250, 700 500" stroke-width="130" stroke="#5468FF" fill="transparent"/>
	   <path d="M699 499 Q 943 700, 680 1260" stroke-width="130" stroke="#5468FF" fill="transparent"/>
	   </svg>


	   

	</g>
</svg>

 

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值