SVG代码示例

最新推荐文章于 2024-05-19 10:03:01 发布

idealab

最新推荐文章于 2024-05-19 10:03:01 发布

阅读量267

点赞数

分类专栏：互联网文章标签： Scala XML HTML

本文链接：https://blog.csdn.net/idealab/article/details/83527887

版权

互联网专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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>