javascript-in-svg

library(minisvg)

Add Javascript code for a <script> block

#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
# Create a document with a single blue rectangle
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
doc <- svg_doc(width = 200, height = 200)
doc$rect(
  id     = "myrect",
  x      = 10,
  y      = 10,
  width  = 180,
  height = 180,
  fill   = 'blue'
)

#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
# Add javascript to edit the DOM and change the fill colour to blue
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
doc$add_js_code("
var element = document.getElementById('myrect');
element.setAttributeNS(null, 'fill', 'green');
console.log('hi {minisvg}');
")

doc$save("svg/javascript-01.svg")

  <?xml version="1.0" encoding="UTF-8"?>
  <svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect id="myrect" fill="blue" x="10" y="10" width="180" height="180" />
  <script language='javascript'>
  <![CDATA[
  
  var element = document.getElementById('myrect');
  element.setAttributeNS(null, 'fill', 'green');
  console.log('hi {minisvg}');
  
  ]]>
  </script>
  </svg>

Link to external Javascript

#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
# Create a document with a single blue rectangle
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
doc2 <- svg_doc(width = 200, height = 200, id='svg2')
doc2$rect(
  id     = "myrect2",
  x      = 10,
  y      = 10,
  width  = 180,
  height = 180,
  fill   = 'blue'
)

#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
# Link to the D3.js library
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
doc2$add_js_url("https://d3js.org/d3.v5.min.js")

#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
# Add d3.js code to change the fill colour to red 
# and add a new rectangle
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
doc2$add_js_code("
console.log('start {minisvg}');
var rect = d3.select('#myrect2');
rect.attr('fill', 'red');
var doc = d3.select('#svg2');
doc.append('rect')
  .attr('x', 0)
  .attr('y', 0)
  .attr('width', 50)
  .attr('height', 50)
  .attr('fill', 'blue')
  .attr('stroke', 'black');
console.log('end {minisvg}');
")

doc2$save("svg/javascript-02.svg")

  <?xml version="1.0" encoding="UTF-8"?>
  <svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg2">
    <rect id="myrect2" fill="blue" x="10" y="10" width="180" height="180" />
  <script xlink:href='https://d3js.org/d3.v5.min.js'></script>
  <script language='javascript'>
  <![CDATA[
  
  console.log('start {minisvg}');
  var rect = d3.select('#myrect2');
  rect.attr('fill', 'red');
  var doc = d3.select('#svg2');
  doc.append('rect')
    .attr('x', 0)
    .attr('y', 0)
    .attr('width', 50)
    .attr('height', 50)
    .attr('fill', 'blue')
    .attr('stroke', 'black');
  console.log('end {minisvg}');
  
  ]]>
  </script>
  </svg>