Computing desk
< November 15	<< Oct \| November \| Dec >>	Current desk >

Welcome to the Wikipedia Computing Reference Desk Archives
The page you are currently viewing is a transcluded archive page. While you can leave answers for any questions shown below, please ask new questions on one of the current reference desk pages.

November 16

JavaScript calculations in SVG

Hi, I am creating an SVG image which involves a number of shapes, that taken as a group, need to be rotated about a certain point. I can do it like this:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100">
  <g transform="rotate(120, 50, 50)">
    <circle cx="50" cy="50" r="30" fill="yellow" stroke="black" stroke-width="2.5" />
    <line x1="50" y1="10" x2="50" y2="40" stroke="red" stroke-width="5" />
  </g>
</svg>

In the transform="rotate(120, 50, 50)" attribute, 120 is the angle of rotation in degrees, and 50, 50 is the centre of rotation (see SVG 1.1 spec for the 'transform' attribute). The angle that I wish to rotate by is supplied to me as degrees, minutes and seconds. Calculating the angle of rotation as a pure degrees is easy (d + m/60 + s/3600), and this is fine for one-off uses, but I need to perform the calculation many times for different sets of source data. What I want to do is input the three components individually without having to perform the calculation on the outside. I thought of using JavaScript, and SVG allows this - the code

<script type="application/javascript">
  function dms2deg(d, m, s) {
    return d + m/60 + s/3600;
  }
</script>

can be inserted into the page source before the <g> tag, and I now have my function. What I don't know how to do is to actually call the function - transform="rotate(dms2deg(75, 9, 1), 50, 50)" isn't being recognised. JavaScript references all seem to assume that you want to hook some event e.g. with onClick="..." or write directly into the page text, but I want to insert the calculated value into a tag's attribute value. The articles JavaScript and JavaScript syntax don't help at all. Does anybody know how to achieve this? --Redrose64 🌹 (talk) 12:21, 16 November 2022 (UTC)[reply]

JavaScript interacts with a webpage using the Document Object Model (DOM). This is most commonly for HTML elements, but works well (on modern browsers) for SVG files too; elements of the SVG can be addressed by their id, and from that the JavaScript can manipulate their properties. This example shows a JavaScript program manipulating the elements of an SVG to create a ticking clock. The problem remains is how the JavaScript gets the parameters (the rotation degrees) that it uses. Depending on your use case, it might work just to bake that into the JavaScript (perhaps a list of settings to use), get it from the user interactively using an HTML form, or the JavaScript might request the data from a file or process on the server whence it came, e.g. using an XMLHttpRequest to fetch data encoded in JSON format. -- Finlay McWalter··–·Talk 17:32, 16 November 2022 (UTC)[reply]