mahuntington
/
d3-notes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

svg adjustments

Browse Source
master
Matt Huntington 8 years ago
parent 17710987d7
commit 1155bc9af9
2 changed files with 54 additions and 40 deletions
Show Stats Download Patch File Download Diff File

78
SVG.md
Unescape View File

@ -44,7 +44,7 @@ We can draw elements in our `<svg>` element by adding a variety of predefined ta
</html> </html>
``` ```
Note that we can't see the circle because it doesn't have a radius: Note that we can't see the circle because it doesn't have a radius, as shown in the below screenshot:
![](https://i.imgur.com/yUXwBPK.png) ![](https://i.imgur.com/yUXwBPK.png)
@ -179,7 +179,7 @@ To demo each element, we'll use the following code as a starting point and then
</html> </html>
``` ```
Let us now move on to each element. Let us now move on to each element. Note that you can write each tag in the form `<element></element>` as we did with `<circle></circle>` previously, or the self-closing form `<element/>`, which you will see next with `<circle/>`.
### Circle ### Circle
@ -197,11 +197,12 @@ Circles have the following attributes:
### Line ### Line
- attributes Lines have the following attributes:
- `x1` starting x position
- `y1` starting y position - `x1` starting x position
- `x2` ending x position - `y1` starting y position
- `y2` ending y position - `x2` ending x position
- `y2` ending y position
```xml ```xml
<line x1="0" y1="0" x2="100" y2="100"/> <!-- this element won't be visible because it doesn't have a stroke --> <line x1="0" y1="0" x2="100" y2="100"/> <!-- this element won't be visible because it doesn't have a stroke -->
@ -212,11 +213,12 @@ Circles have the following attributes:
### Rectangle ### Rectangle
- attributes Rectangles have the following attributes:
- `x` x position of top left
- `y` y position of top left - `x` x position of top left
- `width` width - `y` y position of top left
- `height` height - `width` width
- `height` height
```xml ```xml
<rect x="50" y="20" width="150" height="150"/> <rect x="50" y="20" width="150" height="150"/>
@ -226,11 +228,12 @@ Circles have the following attributes:
### Ellipse ### Ellipse
- attributes An ellipse has the following attributes:
- `cx` x position
- `cy` y position - `cx` x position
- `rx` x radius - `cy` y position
- `ry` y radius - `rx` x radius
- `ry` y radius
```xml ```xml
<ellipse cx="200" cy="80" rx="100" ry="50"/> <ellipse cx="200" cy="80" rx="100" ry="50"/>
@ -240,9 +243,10 @@ Circles have the following attributes:
### Polygon ### Polygon
- attributes Polygons have the following attributes:
- `points` set of coordinate pairs - `points` set of coordinate pairs
- each pair is of the form x,y - each pair is of the form `x,y`
```xml ```xml
<polygon points="200,10 250,190 160,210" /> <polygon points="200,10 250,190 160,210" />
@ -252,7 +256,7 @@ Circles have the following attributes:
### Polyline ### Polyline
A series of connected lines. Can have a fill like a polygon, but won't automatically rejoin itself Polyline is a series of connected lines. It can have a fill like a polygon, but won't automatically rejoin itself
```xml ```xml
<polyline points="20,20 40,25 60,40 80,120 120,140 200,180" stroke="blue" fill="none"/> <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" stroke="blue" fill="none"/>
@ -262,11 +266,10 @@ A series of connected lines. Can have a fill like a polygon, but won't automati
### Text ### Text
The content of the tag is the text to be displayed The content of the tag is the text to be displayed. It has the following attributes:
- attributes - `x` x position of top left corner of the element
- `x` x position of top left corner of the element - `y` y position of top left corner of the element
- `y` y position of top left corner of the element
```xml ```xml
<text x="0" y="15">I love SVG!</text> <text x="0" y="15">I love SVG!</text>
@ -278,11 +281,10 @@ You can use font-family and font-size CSS styling on this element
- This element has no special attributes, so use transform on it. - This element has no special attributes, so use transform on it.
- You can put multiple elements inside it and all of its positioning and styling will apply to its children - You can put multiple elements inside it and all of its positioning and styling will apply to its children
- Its good for moving many elements together as one - It's good for moving many elements together as one
```xml ```xml
<g transform = "translate(20,30) rotate(45) scale(0.5)"> <g transform = "translate(20,30) rotate(45) scale(0.5)"></g>
</g>
``` ```
### Bezier Curves ### Bezier Curves
@ -348,11 +350,11 @@ Here we can define the curve with just three points:
- the start point - the start point
- the end point - the end point
- one single control point which acts as both control point and end control point - one single control point which acts as both start control point and end control point
#### Smooth Quadratic Bezier Curve #### Smooth Quadratic Bezier Curve
The final situation where we can simplify defining a bezier curve is where we have a quadratic bezier curve (one single control point) that is a reflection of the end control point previous curve: The final situation where we can simplify defining a bezier curve is where we have a quadratic bezier curve (one single control point) that is a reflection of the end control point of a previous curve:
![](https://i.imgur.com/Uw9zVrs.png) ![](https://i.imgur.com/Uw9zVrs.png)
@ -364,7 +366,7 @@ In this situation, the browser knows the start point of the curve (the end point
Now that we understand bezier curves, we can use them in our SVGs with `<path>` elements Now that we understand bezier curves, we can use them in our SVGs with `<path>` elements
[Docs](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths) [Documentation](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths)
These tags take a `d` attribute which stands for a set of drawing commands. The value of this attribute is any combination of the below: These tags take a `d` attribute which stands for a set of drawing commands. The value of this attribute is any combination of the below:
@ -426,14 +428,14 @@ Make the following code part of the `d` attribute's value on a `<path>` element.
A rx ry x-axis-rotation large-arc-flag sweep-flag x y A rx ry x-axis-rotation large-arc-flag sweep-flag x y
``` ```
- A - create an arc draw command - `A` - create an arc draw command
- rx - x radius of both ellipses (in px) - `rx` - x radius of both ellipses (in px)
- ry - y radius of both ellipses (in px) - `ry` - y radius of both ellipses (in px)
- x-axis-rotation - rotate both ellipses a certain number of degrees - `x-axis-rotation` - rotate both ellipses a certain number of degrees
- large-arc-flag - whether or not to travel along the arc that contains more than 180 degrees (1 to do so, 0 to not do so) - `large-arc-flag` - whether or not to travel along the arc that contains more than 180 degrees (1 to do so, 0 to not do so)
- sweep-flag - whether or not to move along the arc that goes clock-wise (1 to do so, 0 to not do so) - `sweep-flag` - whether or not to move along the arc that goes clock-wise (1 to do so, 0 to not do so)
- x - destination x value (in px) - `x` - destination x value (in px)
- y - destination y value (in px) - `y` - destination y value (in px)
The `large-arc-flag` determines whether to make an arc that is greater than 180 degrees. Here's an example without it (note, the red shows the arc drawn, while the green arcs are other possible arcs that could be drawn using a combination of `large-arc-flag` and `sweep-flag`): The `large-arc-flag` determines whether to make an arc that is greater than 180 degrees. Here's an example without it (note, the red shows the arc drawn, while the green arcs are other possible arcs that could be drawn using a combination of `large-arc-flag` and `sweep-flag`):

16
examples/svg/index.html
Unescape View File

@ -3,8 +3,20 @@
<head> <head>
</head> </head>
<body> <body>
<svg> <svg width=800 height=600>
<circle r=45 cx=50 cy=50 fill=red stroke=blue stroke-width=5></circle> <!-- <circle r=45 cx=50 cy=50 fill=red stroke=blue stroke-width=5></circle> -->
<circle r="50" cx="200" cy="300"/>
<line x1="0" y1="0" x2="100" y2="100"/> <!-- this element won't be visible because it doesn't have a stroke -->
<line x1="0" y1="0" x2="100" y2="100" stroke="purple"/>
<rect x="50" y="20" width="150" height="150"/>
<ellipse cx="200" cy="80" rx="100" ry="50"/>
<polygon points="200,10 250,190 160,210" />
<polyline points="20,20 40,25 60,40 80,120 120,140 200,180" stroke="blue" fill="none"/>
<text x="0" y="15">I love SVG!</text>
<g transform = "translate(20,30) rotate(45) scale(0.5)"></g>
<path d="M150 0 L75 200 L225 200 Z" stroke="black" fill="transparent"/>
<path d="M0 70 C 0 120, 50 120, 50 70 S 100 20, 100 70" stroke="black" fill="transparent"/>
<path d="M0 100 Q 50 50, 100 100 T 200 100 Z" stroke="black" fill="transparent"/>
</svg> </svg>
</body> </body>
</html> </html>

Write Preview
Loading…
Cancel
Save