Creates a new element with the same name as the method, wrapped in a new collection. Optional attributes can be passed.
/* Create a <circle> element, wrapped in a collection */
var circle = Pablo.circle();
/* Create a <rect> element, supplying attributes */
// This will create: <rect width="50" height="50"/>
var rectangle = Pablo.rect({width: 50, height: 50});
/* Create an <image> element, with a namespaced attribute */
var img = Pablo.image({'xlink:href': '/villain.svg'});
The same element methods can be called directly on collections, to create and append a new element to each element in the collection:
/* Create two groups */
var group1 = Pablo.g(),
group2 = Pablo.g(),
groups = Pablo([group1, group2]);
/* Create and append a circle and rectangle to each group */
var circle = group.circle(),
rectangle = group.rect({width: 50, height: 50});
When chaining methods together, the context will change after an element method is called. In this example, the context changes from the HTML element, to the <svg> element, to the <rect> element:
/* Select an HTML element */
var rectangle = Pablo(demoElement)
// Append an <svg> element to the HTML element
.svg({width:220, height:220})
// Append a <rect> element to the <svg>
.rect({width:200, height:100, fill:'turquoise'})
// Transform the <rect>
.transform('translate', 70)
.transform('rotate', 45);
For elements that contain hyphens, e.g. <font-face-name>, there is a method with the original, hyphenated name as well as an alias method with a camelCased name. For example, Pablo['font-face-name']() is the same as Pablo.fontFaceName().
Each method below is linked to the element’s page on MDN’s element reference. For further information, see MDN’s attribute reference and the Pablo Resources section.
Painting is just another way of keeping a diary.Pablo Picasso