SVG manipulation using JS

by dzul1983

HTML

<svg id="marker" width="50" height="50" xmlns="http://www.w3.org/2000/svg" class="marker">
  <g>
    <title>Marker icon</title>
    <path stroke-width="2" id="svg_1" fill="white" stroke="black" d="m6,28.4c0,-7.2 4,-13.5 10,-16.7c2.7,-1.5 9,-9.1 9,-9.1c0,0 6.3,7.6 8.9,9c6,3.2 10.1,9.5 10.1,16.8c0,10.5 -8.5,19 -19,19c-10.5,0 -19,-8.5 -19,-19z" />
  </g>
</svg>

<input id="rotation" type="range" min="0" max="360" value="0">
<select id="color">
  <option selected>white</option>
  <option>black</option>
  <option>red</option>
  <option>blue</option>
</select>

CSS

.marker {
  transform-origin: 25px 28px;
}

JavaScript

const marker = document.getElementById('marker');
const input = document.getElementById('rotation');
const color = document.getElementById('color');

input.addEventListener('change', function() {
  marker.style.transform = 'rotate(' + this.value + 'deg)';
});

color.addEventListener('change', function() {
	console.log(marker.querySelector('path'))
	marker.querySelector('path').setAttribute('fill', this.value);
});