mirror of
https://github.com/svgdotjs/svg.js.git
synced 2025-10-28 23:26:07 +08:00
Created Create document (markdown)
35
Create-document.md
Normal file
35
Create-document.md
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
Use the `SVG()` function to create a SVG document within a given html element:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
var draw = SVG('canvas').size(300, 300)
|
||||||
|
var rect = draw.rect(100, 100).attr({ fill: '#f06' })
|
||||||
|
```
|
||||||
|
The first argument can either be an id of the element or the selected element itself.
|
||||||
|
This will generate the following output:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div id="canvas">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xlink="http://www.w3.org/1999/xlink" width="300" height="300">
|
||||||
|
<rect width="100" height="100" fill="#f06"></rect>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
By default the svg canvas follows the dimensions of its parent, in this case `#canvas`:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
var draw = SVG('canvas').size('100%', '100%')
|
||||||
|
```
|
||||||
|
|
||||||
|
## Checking for SVG support
|
||||||
|
|
||||||
|
By default this library assumes the client's browser supports SVG. You can test support as follows:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
if (SVG.supported) {
|
||||||
|
var draw = SVG('canvas')
|
||||||
|
var rect = draw.rect(100, 100)
|
||||||
|
} else {
|
||||||
|
alert('SVG not supported')
|
||||||
|
}
|
||||||
|
```
|
||||||
Reference in New Issue
Block a user