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

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

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

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

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

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

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

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

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

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

当然,你也可以 Chrome 浏览器提供的选择元素以审查(Select an element in the page to inspect it)的功能,直接点选 「任意」 文本。

<!-- 不指定具体数值的情况下,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Ⅲ 】画出所有你想要的图形(代码示例)

发表评论

您的电子邮箱地址不会被公开。