commit 1d68e20041bcfc51343014c424730ce9158a323a · cduck.me/drawsvg

+33 -2

README.md

···

       101
       101
        
       

     

       102
       102
        
       [![Example output image](https://raw.githubusercontent.com/cduck/drawsvg/master/examples/example1.png)](https://github.com/cduck/drawsvg/blob/master/examples/example1.svg)

     

       103
       103
        
       

     

       104
       104
       -
       ### SVG-Native Animation with playback controls

     

       104
       104
       +
       ### SVG-native animation with playback controls

     

       105
       105
        
       ```python

     

       106
       106
        
       import drawsvg as draw

     

       107
       107
        
       

     
···

       188
       188
        
       

     

       189
       189
        
       [![Example output image](https://raw.githubusercontent.com/cduck/drawsvg/master/examples/example2.png)](https://github.com/cduck/drawsvg/blob/master/examples/example2.svg)

     

       190
       190
        
       

     

       191
       191
       -
       ### Duplicate geometry and clip paths

     

       191
       191
       +
       ### Duplicate geometry, clip paths

     

       192
       192
        
       ```python

     

       193
       193
        
       import drawsvg as draw

     

       194
       194
        
       

     
···

       206
       206
        
       

     

       207
       207
        
       # Make a transparent copy, cropped again

     

       208
       208
        
       g = draw.Group(opacity=0.5, clip_path=clip)

     

       209
       209
       +
       # Here, circle is not directly appended to the drawing.

     

       210
       210
       +
       # drawsvg recognizes that `Use` references `circle` and automatically adds

     

       211
       211
       +
       # `circle` to the <defs></defs> section of the SVG.

     

       209
       212
        
       g.append(draw.Use(circle, 0.25, -0.1))

     

       210
       213
        
       d.append(g)

     

       211
       214
        
       

     
···

       215
       218
        
       ```

     

       216
       219
        
       

     

       217
       220
        
       [![Example output image](https://raw.githubusercontent.com/cduck/drawsvg/master/examples/example3.png)](https://github.com/cduck/drawsvg/blob/master/examples/example3.svg)

     

       221
       221
       +
       

     

       222
       222
       +
       ### Organizing and duplicating drawing elements

     

       223
       223
       +
       ```python

     

       224
       224
       +
       import drawsvg as draw

     

       225
       225
       +
       

     

       226
       226
       +
       d = draw.Drawing(300, 100)

     

       227
       227
       +
       d.set_pixel_scale(2)

     

       228
       228
       +
       

     

       229
       229
       +
       # Use groups to contain other elements

     

       230
       230
       +
       # Children elements of groups inherit the coordinate system (transform)

     

       231
       231
       +
       # and attribute values

     

       232
       232
       +
       group = draw.Group(fill='orange', transform='rotate(-20)')

     

       233
       233
       +
       group.append(draw.Rectangle(0, 10, 20, 40))  # This rectangle will be orange

     

       234
       234
       +
       group.append(draw.Circle(30, 40, 10))  # This circle will also be orange

     

       235
       235
       +
       group.append(draw.Circle(50, 40, 10, fill='green'))  # This circle will not

     

       236
       236
       +
       d.append(group)

     

       237
       237
       +
       

     

       238
       238
       +
       # Use the Use element to make duplicates of elements

     

       239
       239
       +
       # Each duplicate can be placed at an offset (x, y) location and any additional

     

       240
       240
       +
       # attributes (like fill color) are inherited if the element didn't specify them.

     

       241
       241
       +
       d.append(draw.Use(group, 80, 0, stroke='black', stroke_width=1))

     

       242
       242
       +
       d.append(draw.Use(group, 80, 20, stroke='blue', stroke_width=2))

     

       243
       243
       +
       d.append(draw.Use(group, 80, 40, stroke='red', stroke_width=3))

     

       244
       244
       +
       

     

       245
       245
       +
       d.display_inline()

     

       246
       246
       +
       ```

     

       247
       247
       +
       

     

       248
       248
       +
       [![Example output image](https://raw.githubusercontent.com/cduck/drawsvg/master/examples/example8.png)](https://github.com/cduck/drawsvg/blob/master/examples/example8.svg)

     

       218
       249
        
       

     

       219
       250
        
       ### Implementing other SVG tags

     

       220
       251
        
       ```python

examples/example8.png

This is a binary file and will not be displayed.

+15

examples/example8.svg

···

       1
       1
       +
       <?xml version="1.0" encoding="UTF-8"?>

     

       2
       2
       +
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

     

       3
       3
       +
           width="600" height="200" viewBox="0 0 300 100">

     

       4
       4
       +
       <defs>

     

       5
       5
       +
       <g fill="orange" transform="rotate(-20)" id="d0">

     

       6
       6
       +
       <rect x="0" y="10" width="20" height="40" />

     

       7
       7
       +
       <circle cx="30" cy="40" r="10" />

     

       8
       8
       +
       <circle cx="50" cy="40" r="10" fill="green" />

     

       9
       9
       +
       </g>

     

       10
       10
       +
       </defs>

     

       11
       11
       +
       <use xlink:href="#d0" />

     

       12
       12
       +
       <use xlink:href="#d0" x="80" y="0" stroke="black" stroke-width="1" />

     

       13
       13
       +
       <use xlink:href="#d0" x="80" y="20" stroke="blue" stroke-width="2" />

     

       14
       14
       +
       <use xlink:href="#d0" x="80" y="40" stroke="red" stroke-width="3" />

     

       15
       15
       +
       </svg>