Sideway
output.to from Sideway
Draft for Information Only

Content

Embedded Line and Path SVG Examples:
 Sources and References

Embedded Line and Path SVG Examples:

SVG Code Input:
<?xml version="1.0" standalone="no"?>

    
<svg style='border:1px solid black' width='580' height='450' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
<svg width='526' height='426' viewBox='-25, -25, 526, 426' version='1.1'  xmlns='http://www.w3.org/2000/svg'>
   <pattern id='pattern-halfgrid' x='0' y='0' width='5' height='5' patternUnits='userSpaceOnUse'>
       <path d='M 5 0 L 0 0 0 5' fill='none' stroke='red' stroke-width='0.2'/>
   </pattern>
   <pattern id='pattern-grid' x='0' y='0' width='10' height='10' patternUnits='userSpaceOnUse'>
       <rect width='10' height='10' fill='url(#pattern-halfgrid)' stroke-width='0'></rect>
       <path d='M 10 0 L 0 0 0 10' fill='none' stroke='black' stroke-width='0.2'/>
   </pattern>
   <rect x='0' y='0' width='100%' height='100%' fill='url(#pattern-grid)' stroke-width='0'></rect>

<defs>
   <marker id='circle' markerWidth='12' markerHeight='12' refX='5' refY='5' orient='auto'>
       <circle cx='5' cy='5' r='3' stroke='black' stroke-width='1' fill='white'/>
       <path d='M 4,3.5 L 6.5,5 L 4,6.5 Z' fill='black'/>
   </marker>
</defs>
<path id = 'P2' stroke = 'red' stroke-width = '3' fill = '#eec1c2' d ='M 0,200 C 50,200 100,400 150,200 C 200,0 250,200 500,200'>
   <animate attributeName='d' dur='10' values='M 0,200 C 50,200 100,400 150,200 C 200,0 250,200 500,200; M 0,200 C 50,200 100, 0 150,200 C 200,400 250,200 500,200; M 0,200 C 50,200 100,400 150,200 C 200,0 250,200 500,200' repeatCount='indefinite'/>
</path> 
<line x1='100' y1='100' x2='200' y2='300' marker-start='url(#circle)' stroke='black' stroke-width='1' marker-end='url(#circle)'>
   <animate attributeName='y1' dur='10' values='400;0;400 ' repeatCount='indefinite'/>
   <animate attributeName='y2' dur='10' values='0;400;0 ' repeatCount='indefinite'/>
</line>
</svg>
<text x='5' y='17' font-size='20'>(0,0)</text>
<text x='495' y='17' font-size='20'>(500,0)</text>
<text x='5' y='445' font-size='20'>(0,400)</text>
<text x='495' y='445' font-size='20'>(500,400)</text>
<circle cx='25' cy='25' r='2' fill='black'/>
<circle cx='525' cy='25' r='2' fill='black'/>
<circle cx='25' cy='425' r='2' fill='black'/>
<circle cx='525' cy='425' r='2' fill='black'/>
</svg>
    
HTML Web Page Embedded Output:

Sources and References

http://srufaculty.sru.edu/david.dailey/svg/newstuff/Newlist.htm http://srufaculty.sru.edu/david.dailey/svg/newstuff/path8.svg

©sideway

ID: 211200006 Last Updated: 12/6/2021 Revision: 0 Ref:

close

References

  1. http://www.w3.org/TR/1999/REC-html401-1999, 1999, HTML 4.01 Specification: W3C Recommendation, updated 24 December 1999
close
IMAGE

Home 5

Business

Management

HBR 3

Information

Recreation

Hobbies 8

Culture

Chinese 1097

English 337

Reference 68

Computer

Hardware 160

Software

Application 205

Digitization 25

Latex 35

Manim 203

Numeric 19

Programming

Web 285

Unicode 504

HTML 65

CSS 65

SVG 46new

ASP.NET 270

OS 422

DeskTop 7

Python 71new

Knowledge

Mathematics

Formulas 8

Algebra 84

Number Theory 206

Trigonometry 31

Geometry 32new

Coordinate Geometry 2

Calculus 67

Complex Analysis 21

Engineering

Tables 8

Mechanical

Mechanics 1

Rigid Bodies

Statics 92

Dynamics 37

Fluid 5

Fluid Kinematics 5

Control

Process Control 1

Acoustics 19

FiniteElement 2

Natural Sciences

Matter 1

Electric 27

Biology 1

Geography 1


Copyright © 2000-2022 Sideway . All rights reserved Disclaimers last modified on 06 September 2019