<svg>
<circle class="table selected" r="36" style="fill: rgb(255, 255, 255); stroke: rgb(0, 0, 0);"></circle>
<g transform="translate(0, -36) rotate(180) rotate(0,0,-36)scale(1,1)">
<g style="overflow: visible" class="selected">
<path transform="scale(2)" d="M -8,0 v 8 c 0,4 4,8 8,8 c 4,0 8,-4 8,-8 v -8 z" class="ring" style="stroke: none; fill: rgba(0, 0, 0, 0);" ></path>
<path d="M -8,0 v 8 c 0,4 4,8 8,8 c 4,0 8,-4 8,-8 v -8 z" class="ring" style="stroke: rgb(107, 103, 103); fill: rgba(255, 255, 255, 0.2);"></path>
</g>
</g>
<g transform="translate(0, -36) rotate(180) rotate(30,0,-36)scale(1,1)">
<g style="overflow: visible" class="selected">
<path transform="scale(2)" d="M -8,0 v 8 c 0,4 4,8 8,8 c 4,0 8,-4 8,-8 v -8 z" class="ring" style="stroke: none; fill: rgba(0, 0, 0, 0);" ></path>
<path d="M -8,0 v 8 c 0,4 4,8 8,8 c 4,0 8,-4 8,-8 v -8 z" class="ring" style="stroke: rgb(107, 103, 103); fill: rgba(255, 255, 255, 0.2);"></path>
</g>
</g>
</svg>
<!-- Chair SVG Definition-->
<symbol id="chair">
<g style="overflow: visible" class="selected">
<path transform="scale(2)" d="M -8,0 v 8 c 0,4 4,8 8,8 c 4,0 8,-4 8,-8 v -8 z" class="ring" style="stroke: none; fill: rgba(0, 0, 0, 0);" ></path>
<path d="M -8,0 v 8 c 0,4 4,8 8,8 c 4,0 8,-4 8,-8 v -8 z" class="ring" style="stroke: rgb(107, 103, 103); fill: rgba(255, 255, 255, 0.2);"></path>
</g>
</symbol>
<!-- Table SVG Definition-->
<symbol id="table">
<circle class="base-table selected" r="36" style="stroke: rgb(0, 0, 0); fill: rgb(255, 255, 255)"></circle>
<use xlink:href="#chair" transform="translate(0, -36) rotate(180) rotate(0,0,-36) scale(1,1)"></use>
<use xlink:href="#chair" transform="translate(0, -36) rotate(180) rotate(30,0,-36) scale(1,1)"></use>
<use xlink:href="#chair" transform="translate(0, -36) rotate(180) rotate(60,0,-36) scale(1,1)"></use>
<use xlink:href="#chair" transform="translate(0, -36) rotate(180) rotate(90,0,-36) scale(1,1)"></use>
</symbol>
<!-- Using the symbol to create 3 tables -->
<use xlink:href="#table" transform="translate(0, -36)"></use>
<use xlink:href="#table" transform="translate(0, -56)"></use>
<use xlink:href="#table" transform="translate(0, -76)"></use>
var shapes = ko.observableArray();
var circle1 = {
x: 30,
y: 30,
color: "red"
};
var circle2 = {
x: 90,
y: 90,
color: "green"
};
shapes.push(circle1);
shapes.push(circle2);
<svg>
<!-- ko foreach: shapes() -->
<circle r="40" stroke="black" data-bind="attr: {cx: x, cy: y, fill: color}" />
<!-- /ko -->
</svg>
/*
Assuming that 'shapes' refers to the array of shape data in earlier slide
*/
var fragment = document.createDocumentFragment();
for(var i = 0; i < shapes.length; i++) {
// Create 'circle' element
var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
// Set attributes on circle
circle.setAttribute("cx", shapes[i].x);
circle.setAttribute("cy", shapes[i].y);
circle.setAttribute("fill", shapes[i].color);
// Append circle to fragment
fragment.appendChild(circle);
}
// Append the single fragment to the SVG element
document.getElementByTagName("svg").appendChild(fragment);
var table = {
numChairs: 12,
color: "white",
radius: 10
}
3. Append this document fragment to the SVG element
Original
Refactored
Original
Refactored