以后的文章,都会默认带出这个“出品LOGO”
CSDN上面的SVG效果好像展示不出来,想想看效果的,去公众号吧
公众号:Xi说SVG
LOGO代码如下,引用了网上的背景图片,其实就是把图片上传到公众号资源库,然后引用即可。
<svg xmlns="http://www.w3.org/2000/svg" style="background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/kLwGw8KricxMwnugI0S5b0jSYH58sibLPOv9efUKPHJQ7ZoBI1WLG75v4fpR0gKHFKdtPuxRP2QUnCnXEGoWKIJg/0?wx_fmt=jpeg)" viewBox="-300,0,1000,800">
<!--<svg xmlns="http://www.w3.org/2000/svg" style="background-color: indianred" viewBox="-300,0,1000,800">-->
<!--
stroke-dasharray属性,用来控制组成图形的线段的长度,不论显示的线段还是空白,均按照这个规律
1,stroke-dasharray="10",表示每个10距离,画10长度的线段
stroke-dasharray="10,20",表示先隔10距离,再隔20,以此类推
-->
<g stroke="aquamarine" stroke-width="5" fill="none" stroke-dasharray="1,2,1">
<!-- 主体:Xi说孔方兄-->
<ellipse cx="200" cy="200" rx="180" ry="80"></ellipse>
<ellipse cx="200" cy="200" rx="200" ry="92" stroke-dasharray="1,10,1"></ellipse>
<text transform="translate(200,220)" text-anchor="middle" font-size="60">Xi说孔方兄</text>
<!-- 左眼-->
<circle cx="-130" cy="200" r="120"></circle>
<circle cx="-130" cy="200" r="100"></circle>
<circle cx="-130" cy="200" r="80"></circle>
<circle cx="-130" cy="200" r="60"></circle>
<text x="-130" y="225" text-anchor="middle" stroke="chartreuse" font-size="80">出</text>
<!-- 右眼-->
<circle cx="530" cy="200" r="120"></circle>
<circle cx="530" cy="200" r="100"></circle>
<circle cx="530" cy="200" r="80"></circle>
<circle cx="530" cy="200" r="60"></circle>
<text x="530" y="225" text-anchor="middle" stroke="chartreuse" font-size="80">品</text>
<!-- 嘴-->
<path d="M-130 350A200 200 0 0 0 530 350"></path>
</g>
<g transform="rotation">
<!-- 右眼星 上半部分-->
<polygon points="600 100 630 90 640 60 650 90 680 100" fill="white" stroke="none"></polygon>
<!-- 右眼星 下半部分-->
<polygon points="600 100 630 110 640 140 650 110 680 100" fill="white" stroke="none"></polygon>
<!-- 旋转动画-->
<animateTransform attributeType="XML" attributeName="transform" begin="0s" dur="5s" type="rotate" from="0 0 0" to="360 360 360" repeatCount="indefinite" />
</g>
</svg>