mirror of
https://github.com/svgdotjs/svg.js.git
synced 2025-10-27 18:44:44 +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