【SVGⅡ】用代码在公众号中画各种图形

大疆·新媒体运营 JD

不会代码的运营不是好的产品。

一个运营人员可以不精通代码,但遇到的时候至少应该不是一味规避,这一两年在公众号交互上展露头角的SVG技术就很值得钻研。

或许你可以跟着我,写下人生中的第一行代码。

首先你需要一个代码编辑器,这里我用的是代码编辑器是 Visual Studio Code,你可以在网上搜索下载。

*请在官网或Github等可信渠道下载。

下载完成后,我们可以给 Visual Studio Code 安装插件「SVG」,方便我们接下来的编辑工作。

▲自动补足标签
▲实时预览

接下来尝试着在公众号内画一个矩形。

使用Chrome浏览器打开公众号后台并新建图文消息,输入任意字符,比如「任意」。在浏览器页面右击选择「审查元素/Inspect」,搜索到 「任意」——一个由 「P」标签包裹的代码段, 右击选择「Edit as HTML」,复制&粘贴下面的代码,替换原来的代码。

<!-- 不指定具体数值的情况下,SVG宽高默认为300*150(px) -->
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
    <rect width="100" height="100" x="50" y="50" 
    style="fill:#ffff00; stroke-width:10; stroke:#ff0000;" />
</svg>

在公众号推文中的预览效果▼

在网站中也可以绘制SVG图形▼

除了 rect(矩形)、circle(圆形)之外,SVG基本图形还包括 ellipse(椭圆)、line(直线)、polyline(折线),polygon(多边形),更为复杂的图形需要通过 path(路径)绘制。如果我们需要做SVG动画,可以在Visual Studio Code上编辑完成后,再一次性通过浏览器注入微信公众号后台。

这里需要注意,所有的SVG图形标签既可以写成单标签,也可以写成双标签。

你也可以选择在线编辑SVG

▲在线编辑SVG

【SVGⅡ】用代码在公众号中画各种图形》有1条评论

你有话要说?