內容簡介
動畫準備好的 SVG 圖片，並將其作為行動裝置圖片使用。使用 Anime.js 和 Vivus.js
範例：
音樂家
政治人物
簡碼
在 WordPress 的標準 uploads 資料夾（在多站點中為 uploads/sites/#/）中添加所需準備好的圖片（見範例），然後在任意頁面中添加簡碼，指定要使用的 SVG 資料夾並執行動畫：
[caldersvg svgs="wp-content/my/folder/containing/svg/files/"]
或者
[caldersvg svgs="/var/www/mysite/wp-content/my/folder/containing/svg/files/"]
其中所有的 .svg 檔案都在最後一個資料夾中。
svgs 參數不包含 URL（以http://開頭），而是以伺服器上相對路徑的形式表示。
您可以使用插件內附的預設演示檔案（位於 calder-svg/svg/ 中）進行測試，但必須在您的 WordPress 上傳資料夾中複製它們，並使用下列其中一個簡碼：
[caldersvg svgs="../../svg/musicians/"]
SVG 檔案範例
如果使用 Inkscape 創建 SVG 檔案，請將檔案另存為優化的 SVG，然後檢查每個路徑是否包含輪廓並且不包含填充（否則可能會出現奇怪的顯示）。
fill="none" stroke-width="1" stroke="#cecece"
<svg id="svg7876" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 571.25 650" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
<g id="g8426">
<path id="path8440" fill="none" stroke-width="1" stroke="#cecece" d="m0 596.79c0-44.452 0.29402-53.508 1.7857-55 0.9822-0.99
外掛標籤
開發者團隊
原文外掛簡介
Animate prepared SVG drawing as a mobile picture. Uses Anime.js and Vivus.js
Examples:
Musicians
Politicians
Shortcode
Add desired prepared (see example) images in wordpress standard uploads folder (on multisite uploads/sites/#/), and add shortcode to any page, specifing svg folder to use and animate:
[caldersvg svgs="wp-content/my/folder/containing/svg/files/"]
or
[caldersvg svgs="/var/www/mysite/wp-content/my/folder/containing/svg/files/"]
with all your .svg files in last folder.
The svgs parameter DOES NOT contain a URL (starting by http://), but a relative path on the server.
You can test with default demo files, included inside plugin (under calder-svg/svg/), but you have to copy them under your uploads wordpress folder before, and use something like shortcode:
[caldersvg svgs="../../svg/musicians/"]
SVG file example
If using Inkscape to create the SVG files, please save your files as Optimized SVG, then check that your file is containing a stroke and no fill for each path (else you could experience strange displays).
Like:
fill="none" stroke-width="1" stroke="#cecece"