Update SVG in DOM

by Guillaume Seguin

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://d3js.org/d3.v3.js"></script>
<div ng-controller="svgDemoCtrl">
    <svg id="mySvg" height="320" Width="480" style="background-color:blue">
        <line y1="320" stroke="white" x1="240" x2="240" y2="160" stroke-width="3"></line>
        <text y="140" fill="white" text-anchor="middle" x="240" class="">10</text>
    </svg>
    <button type="button" onclick="addPoly()">Add polygon with JQUERY</button>
    <a href="http://stackoverflow.com/questions/3642035/jquerys-append-not-working-with-svg-element#answer-3642265">Why it doesn't work with JQuery</a>
    <button type="button" onclick="addPolyD3()">Add polygon with D3</button>
    <button type="button" onclick="rmPolyD3()">Remove polygon with D3</button>
    <p>I would like to say: </p>
    <button type="button" onclick="sayHello()">Say hello with JQUERY</button>
</div>

JavaScript

'use strict';

var addPoly = function(){
    $( 'svg#mySvg' ).append( '<polygon points="190,220 290,220 240,320" style="fill:#c05414" />' );
};
var addPolyD3 = function(){
    d3.select('svg#mySvg').append('polygon')
        .attr('points', '190,220 290,220 240,320')
        .attr('style', 'fill:#c05414');
};
var rmPolyD3 = function(){
    d3.select('svg#mySvg > polygon').remove();
};
var sayHello = function(){
    $( "p" ).append( "<strong>Hello</strong>" );
};