我想在我的黑色半圆规顶部放置一个带有数字和线条的刻度。问题是我有两组元素在同一组中彼此不适合。因此,比例元素的局部坐标系位于底部,我无法使用变换函数将其放置在中心。 .
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>
最佳答案
这是在 SVG 中定位组的示例:
您将组放在 <defs>
中然后你用 <use>
重用它. <use>
元素可能具有定义新位置的 x 和 y 属性。
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>
在上面的示例中,我两次绘制同一组,每次都在不同的位置。
关于css - 在 SVG 中定位多个组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52329775/