SVG_7_矢量图_Xi说孔方兄出品-官方LOGO

以后的文章，都会默认带出这个“出品LOGO”

 

优快云上面的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>