[wordpress插件] Calder SVG卡尔德SVG

Animate prepared SVG drawing as a mobile picture.

将准备好的SVG绘图动画化为移动图像。

Uses Anime.js and Anime.js 和

.io/vivus/" title="Vivus.js" rel="nofollow">Vivus.js

.io / vivus /“ title =” Vivus.js“ rel =” nofollow“> 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

在wordpress标准 uploads 文件夹中（在多站点 uploads / sites /＃/ 上）中添加所需的准备好的（见示例）图像，并在任何页面上添加简码，指定svg

folder to use and animate:

要使用和设置动画的文件夹：

[caldersvg svgs="wp-content/my/folder/containing/svg/files/"]
  [caldersvg svgs =“ wp-content / my / folder / contains / svg / files /”]
 
or
或
[caldersvg svgs="/var/www/mysite/wp-content/my/folder/containing/svg/files/"]
  [caldersvg svgs =“ / var / www / mysite / wp-content / my / folder / contains / svg / files /”]
 
with all your .svg files in last folder.
将所有.svg文件保存在最后一个文件夹中。
The svgs parameter DOES NOT contain a URL (starting by http://), but a relative path on the server.<
  svgs 参数不包含 URL （以http：//开头），而是服务器上的相对路径。< 
/p>
/ p>
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:
您可以使用插件中包含的默认演示文件进行测试（在calder-svg / svg /下），但是您必须之前将其复制到上载的wordpress文件夹下，并使用短代码：
[caldersvg svgs="../../svg/musicians/"]
  [caldersvg svgs =“ ../../ svg / musicians /”]
 
SVG file example
 SVG文件示例
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).
如果使用Inkscape创建SVG文件，请将文件另存为Optimized SVG，然后检查文件是否包含笔触且每个路径都没有填充（否则您可能会遇到奇怪的显示）。
Like:
喜欢：
fill="none" stroke-width="1" stroke="#cecece"
  fill =“ none” stroke-width =“ 1” stroke =“＃cecece”
“>    
        
        
安装步骤
Easy
简单
Search Calder SVG via plugins > add new.
通过插件搜索Calder SVG>添加新内容。
Find the plugin listed and click activate.
找到列出的插件，然后单击激活。
Use the Shortcodes
使用简码
Shortcode
简码
Add desired prepared (see example) images in wordpress standard uploads folder (on multisite uploads/sites/#/), and add shortcode to any page, specifing svg
在wordpress标准 uploads 文件夹中（在多站点 uploads / sites /＃/ 上）中添加所需的准备好的（见示例）图像，并在任何页面上添加简码，指定svg
folder to use and animate:
要使用和设置动画的文件夹：
[caldersvg svgs="wp-content/my/folder/containing/svg/files/"]
  [caldersvg svgs =“ wp-content / my / folder / contains / svg / files /”]
 
or
    
或
    
[caldersvg svgs=”/var/www/mysite/wp-content/my/folder/containing/svg/files/”]
[caldersvg svgs =” / var / www / mysite / wp-content / my / folder / contains / svg / files /”] 
with all your .svg files in last folder.
将所有.svg文件保存在最后一个文件夹中。
The svgs parameter DOES NOT contain a URL (starting by http://), but a relative path on the server.<
  svgs 参数不包含 URL （以http：//开头），而是服务器上的相对路径。< 
/p>
/ p>
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:
    
您可以使用插件中包含的默认演示文件进行测试（在calder-svg / svg /下），但是您必须之前将其复制到上载的wordpress文件夹下，并使用短代码：
    
[caldersvg svgs=”../../svg/musicians/”]
[caldersvg svgs =” ../../ svg / musicians /”] 
SVG file example
 SVG文件示例
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).
如果使用Inkscape创建SVG文件，请将文件另存为Optimized SVG，然后检查文件是否包含笔触且每个路径都没有填充（否则您可能会遇到奇怪的显示）。
Like:
    
喜欢：
    
fill=”none” stroke-width=”1″ stroke=”#cecece”
fill =” none” stroke-width =” 1” stroke =”＃cecece” 
dc / elements / 1.1 /“>    
        
        
Musicians
 音乐家 
Politicians
 政客