Frame Decoration
Apply visual enhancements to any layer via the
frame attribute.
Attributes
| Attribute | Description | Default |
|---|---|---|
backColor | Background color | none |
backOpacity | Background opacity (0–1) | 1 |
frameColor | Border color | none |
frameSize | Border width (px) | 4 |
cornerRadius | Corner radius (px) | 0 |
padding | Content padding (px) | 0 |
shadow | Enable shadow | false |
shadowColor | Shadow color | 'black' |
shadowOffset | Shadow offset (px) | 4 |
Text with Background
$.textArea({
fontSize: 40,
frame: {
backColor: 'white', backOpacity: 0.8,
frameColor: 'black', frameSize: 2,
cornerRadius: 8, padding: 10
}
}).text("Breaking News").addTo('svg');Image with Shadow
$.image({
href: 'logo.png', width: 300, height: 300,
frame: {
shadow: true, shadowColor: 'rgba(0,0,0,0.5)',
shadowOffset: 8, shadowBlur: 10
}
}).addTo('svg');Related Pages
- Layers Overview — all layers support
frame - Text Layers — frame for text backgrounds
- Media Layers — reflection effects