SVG:Scala Vector Graphics
SVG in HTML:
<!-- 1st way to import SVG script -->
<object type="image/svg+xml" data="test.svg" width="500" height="300">
</object>
<!-- 2nd way to import SVG script -->
<iframe src="test.svg" width="500" height="300"></iframe>
<!-- 3rd way to import SVG script -->
<embed src="test.svg" width=500" height="300" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/" />
SVG in sample(test.svg):
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="500" height="300" xmlns="http://www.w3.org/2000/svg">
<!-- Box around the image -->
<rect x="1" y="1" width="498" height="298"
fill="none" stroke="black" stroke-width="5" style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
<!-- Visible path -->
<path d="M0,300 S150,100 200,200 S400,400 500,0"
fill="green" stroke="blue" stroke-width="2" />
<!-- Group of elements to animate -->
<g stroke-width="5" stroke="black">
<!-- Stick figure pieces -->
<circle cx="0" cy="-45" r="10" fill="black"/>
<line x1="-20" y1="-30" x2="0" y2="-25"/>
<line x1="20" y1="-30" x2="0" y2="-25"/>
<line x1="-20" y1="0" x2="0" y2="-10"/>
<line x1="20" y1="0" x2="0" y2="-10"/>
<line x1="0" y1="-10" x2="0" y2="-45"/>
<!-- Animation controls -->
<animateMotion path="M0,300 S150,100 200,200 S400,400 500,0"
begin="1s" dur="5s" repeatCount="indefinite"
rotate="auto" fill="freeze"/>
<animateColor attributeName="fill" attributeType="CSS" from="yellow" to="green" begin="1s" dur="5s" fill="freeze"/>
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="-15" to="15" begin="1s" dur="5s" fill="freeze"/>
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="2" additive="sum" begin="1s" dur="5s" fill="remove"/>
</g>
</svg>
PS:推荐图形化SVG创建工具:
http://www.inkscape.org
分享到:
相关推荐
矢量格式转换程序,基于JAVA实现的SVG转EMF的的示例代码,下载后导入到eclipse即可运行。
代码优化永远是程序员亘古不变的需求,而合理的利用SVG图片来代替部分PNG/JPG等格式的图片则是前端优化重要的一环,既然是优化,那我们先来看看SVG图片都有哪些优势: SVG 可被非常多的工具读取和修改(比如记事本)...
C#,.net,winform上的用于显示svg,操作svg的源代码,示例代码,代码比较齐全,也比较简单,容易上手。
smile(“表情和压力”示例的代码).xhtml
SVG报表示例,值得收藏,强烈推荐,Email:dev@hkingsoft.com
此代码是利用js操作svg整体缩放的示例,包含简单的网格绘制及滑轮缩放事件。
HTML5 SVG 3D 效果实现示例,附带全部代码
该存储库包含基于Web动画,Polymer和SVG的图形和动画,这些图形和动画将动画效果添加到polymer-svg存储库中的Polymer和SVG代码示例中。 如您所见,此存储库包含大量代码示例(请考虑“样本”),并具有许多类似的...
在线将SVG转换为Vue组件
Angular,Ng-Zorro框架nz-icon组件加载第三方SVG图标示例代码,完整工程文件夹。html图标书写格式:[nzType]="'hello:computer'"></i>
该ppt主要介绍了主要控件的用法,每个控件都有代码示例,可以帮助学习者更好的理解控件的用法。介绍了窗体之间传值的操作示例,以及数据库的操作。学习者可以通过代码更好的去理解控件的使用。
主要介绍了vue动态渲染svg、添加点击事件的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
一个基于SVG的WebGIS源代码【实例】 一个基于SVG的WebGIS源代码【实例】
示例代码:function cubicIn(t) { return t * t * t; }function done() { alert("Done!"); } segment.draw("25%", "75% - 10", 1, {delay: 0.5, easing: cubicIn, callback: done}); ...
SVG示例
本资源是一份名为《CSS3技巧大揭秘:打造精美的爱心SVG动画特效》的RAR压缩包,其中包含了一份详细的教程和相关的代码示例,旨在帮助读者学习如何使用CSS3技术打造出精美的爱心SVG动画特效。 适用人群:本资源适用...
SVG实现镂空动画图标是一款基于SVG的镂空动画图标,图标的绘制是通过SVG的path标签实现的,本示例展示3个不同的东西,篮球、twitter logo和一个猪头。鼠标滑过图标时,图标镂空的部分将会以渐变的方式填充一种颜色,...
示例:/? /?url=https://steren.fr 在本地运行服务器 使用docker build . -t html-to-svg docker build . -t html-to-svg 从docker run -p 8080:8080 html-to-svg 在浏览器中打开...
无论如何,当前代码是开发的良好基础,因为它将节省大量时间来实现正确的编写和优化TTF表。 从CLI使用 安装: npm install -g svg2ttf 用法示例: svg2ttf fontello.svg fontello.ttf 原料药 svg2ttf...
Javascript SVG 音频可视化 这是一个练习 javascript 编码的实验项目。 在我的辩护中:这只是为了实验 --> 代码看起来像废话。 运行演示 执行以下命令来测试演示 安装 npm 依赖项: $ npm install 运行演示: ...