时间戳

首页 > 解决方案 > 在 SVG 中定位多个组

css - 在 SVG 中定位多个组

问题描述

我正在尝试在黑色半圆规的顶部放置一个带有数字和线条的刻度。问题是我有两组元素在同一组中彼此不匹配。因此，比例元素的局部坐标系位于底部，我无法使用变换函数将其放置在中心。 .

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>

标签： csssvg

解决方案

这是在 SVG 中定位组的示例：您将组放在 中，<defs>然后使用<use>. 该<use>元素可能具有定义新位置的 ax 和 ay 属性。

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>

在上面的例子中，我画了同一个组两次，每次都在不同的位置。

推荐阅读