CODEWITHSUNDEEP
csssvg
user10043909
user10043909

Reputation:

Positioning many groups in SVG

I am trying to position a scale with numbers and lines on the top of my black half-circle gauge. The problem is that I have two groups of elements that do not fit with each other in the same group .. Thus the local coordinate system of the scale element is located on the bottom and I cannot use transform functions to place it in the center.. 

var r = 400;
var circles = document.querySelectorAll('.circle');
var total_circles = circles.length;
for (var i = 0; i < total_circles; i++) {
  circles[i].setAttribute('r', r);
}

var meter_dimension = (r * 2) + 100;
var wrapper = document.querySelector('#wrapper');
wrapper.style.width = meter_dimension + 'px';
wrapper.style.height = meter_dimension + 'px';

var cf = 2 * Math.PI * r;
var semi_cf = cf / 2;
var z = 40 * Math.PI;
document.querySelector('#outline_ends')
  .setAttribute('stroke-dasharray', 2 + ',' + (semi_cf - 2)); -
document.querySelector('#mask')
  .setAttribute('stroke-dasharray', semi_cf + ',' + cf);
document.querySelector('#low')
  .setAttribute('stroke-dasharray', semi_cf - z + ',' + cf);

for (i = 0; i <= 180; i = i + 10) {
  var new_tick = noon.cloneNode(true);
  new_tick.getElementsByTagName('text')[0].textContent = i;
  new_tick.removeAttribute("id");
  new_tick.setAttribute("transform", "rotate(" + i + " 0 0)");
  gauge.appendChild(new_tick);
}
body {
  background-color: grey;
}

#wrapper {
  position: relative;
  margin: auto;
}

#meter {
  width: 100%;
  height: 100%;
  transform: rotateX(180deg);
}

.circle {
  fill: none;
}

#mask {
  stroke: yellow;
  stroke-width: 60;
}

.black {
  fill: none;
  stroke: #000000;
  stroke-width: 30;
}

.range {
  stroke-width: 60;
}

.scale {
  stroke: #ffffff;
}

rect {
  fill: transparent;
}
<div id="wrapper">
  <svg id="meter">
    <g class="scale">                
      <circle id="mask" class="circle" cx="50%" cy="50%">
      </circle>
      <circle id="low" class="black" cx="50%" cy="50%" r="360">
      </circle>
      <circle id="outline_ends" class="circle outline" cx="50%" cy="50%">
      </circle>
        <g id="gauge" transform="rotate(-90)">
          <g id="noon">
            <rect x="-10" y="-220" width="20" height="100" />
            <line x1="0" y1="-190" x2="0" y2="-180" />
            <text x="0" y="-200"></text>
          </g>
        </g>
    </g>
  </svg>
</div>

Upvotes: 0

Views: 214

Answers (1)

enxaneta
enxaneta

Reputation: 33044

This is an example of positioning a group in SVG: You put the group in the <defs> and you reuse it with <use>. The <use> element may have a x and a y attributes that are defining the new position.

svg{border:1px solid; max-height:100vh;}
<svg viewBox="0 0 200 75">
 <defs>
  <g id="g1">
    <rect width="20" height="20" />"
  </g>
  </defs> 
  <use xlink:href ="#g1" x="100" y="50"/>
  <use xlink:href ="#g1" x="50" y="10" fill="red"/>
</svg>

In the example above I draw the same group twice, every time in a different position.

Upvotes: 1

Related Questions