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>

猜你喜欢

转载自blog.csdn.net/qq_30117591/article/details/82593736