XML/SVG/path

Материал из Web эксперт
Версия от 21:22, 25 мая 2010; (обсуждение)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

Arc-Based Petal Patterns

   <source lang="xml">

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"

 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">

 <g transform="translate(0,0)">
   <path d="M150,150 a100,100 0 0,0 100,100 z" fill="red"
     stroke="black" stroke-width="4" />
   <path d="M150,150 a100,100 0 0,0 -100,100 z" fill="green"
     stroke="black" stroke-width="4" />
 </g>

</svg>

</source>
   
  


Coloring Elliptic Arcs

   <source lang="xml">

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"

 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">

 <g transform="translate(20,20)">
   
   <path d="M100,100 A150,50 0 0,1 250,50" fill="black"
     stroke="red" stroke-width="8" />
 </g>

</svg>

</source>
   
  


Rendering a Quadratic Bezier Curve

   <source lang="xml">

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"

"http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">

<svg width="800" height="400">

 <g transform="translate(50,50)">
   <path d="m20,20 Q100,0 200,200 T340,240 z" fill="black"
     stroke-dasharray="2 2 2 2" style="stroke:blue;stroke-width:4;" />
   <path d="m0,0 Q100,0 200,200 T300,200 z" fill="red"
     stroke-dasharray="2 2 2 2" style="stroke:blue;stroke-width:4;" />
 </g>

</svg>

</source>
   
  


Using path to Render Rectangles

   <source lang="xml">

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"

"http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">

<svg width="100%" height="100%">

 <g transform="translate(50,50)">
   <path d="M0,0 150,0 150,50 0,50" style="fill:red;" />
 </g>

</svg> The uppercase M refers to an absolute point Use a lowercase m if you need to specify a point in the plane that is relative to the preceding point.

</source>