Расположите динамические фигуры в одной позиции

Question

Когда я нажимаю кнопку каждый раз, когда она дает другую форму. Все фигуры являются динамическими.Это может быть многоугольник или круг (сотни форм).

Форма состоит из группы линий.

Проблема здесь в том, что каждая фигура располагается в другом месте и масштабируется меньше, чемЯ хочу, чтобы они были нормализованы.Все фигуры должны иметь надлежащий эффект масштабирования и располагаться в одной и той же позиции х.Некоторые фигуры располагаются по центру, некоторые - немного левее.

Код с той же матрицей преобразования и масштабом показан ниже. Формы располагаются по-разному. Возможно, проблема заключается в координатах линии. В первомфрагмент кода начинается с (0,0), а строка последней фигуры начинается с (15,5)

Могу ли я указать группу g, расположенную в одинаковом положении для всех фигур. Должен ли я разместить ее относительно чего-либо?

var draw = SVG('drawing').viewbox(0, 0, 400, 400).attr("preserveAspectRatio", "xMidYMid meet");
var group = draw.group().translate(90, 90).scale(3)
var obj = {
    "type": "Polygon",
    "coords": [
        [
            [0, 0],
            [30, 0],
            [30, 20],
            [60, 20],
            [60, 40],
            [0, 40],
            [0, 0]
        ],
        [
            [0, 0],
            [10, 50],
            [50, 10],
            [0, 0]
        ],
        [
            [0, 0],
            [60, 0],
            [80, 40],
            [0, 40],
            [0, 0]
        ],
        [
            [0, 0],
            [50, 0],
            [50, 20],
            [0, 20],
            [0, 0]
        ],
        [
            [50, 10],
            [40, 40],
            [20, 40],
            [10, 20],
            [50, 10]
        ],
        [
            [15, 5],
            [40, 10],
            [10, 20],
            [5, 10],
            [15, 5]
        ],
        [
            [20, 35],
            [10, 30],
            [10, 10],
            [30, 5],
            [45, 20],
            [20, 35]
        ]
    ]
};

shapehandler()
function shapehandler() {
    if (obj.coords.length) {
        group.clear();
        drawShape(obj.coords[0]);
        obj.coords.shift();

    }
}


function drawShape(coords) {
    var lineCoords = [];
    var pointListString = coords.toString();
    var pointListArray = JSON.parse("[" + pointListString + "]");
    for (let i = 0; i < pointListArray.length - 2; i += 2) {
        let [x1, y1, x2, y2] = pointListArray.slice(i, i + 4)
        lineCoords.push({
            x1,
            y1,
            x2,
            y2
        });
    }

    lineCoords.forEach(function (lin, i) {
        let colorShade = [
            '#FFDC0B',
            '#002438',
            '#9B56BB',
            '#c6c7e2',
            '#318700',
            '#fe854f',
            '#FF8400',
            '#31d0c6',
            '#7c68fc',
            '#61549C',
            '#6a6c8a',
            '#4b4a67',
            '#3c4260',
            '#33334e',
            '#222138'
        ];
        group.line(lin.x1, lin.y1, lin.x2, lin.y2).stroke({ color: colorShade[i], width: 4, linecap: 'square' });
    });

}

html, body {
    margin: 0;
    padding: 0;
    font-family: Arial;
}
svg {
    width: 100%;
    height: 100%;
  }
#drawing{
    margin: 20px;
    display: inline-block;
    position: relative;
    border: 1px solid darkgrey;
    overflow:hidden;
    box-sizing: border-box;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.6/svg.js"></script>
 <div id="toolbar">
    <button type="button" id="btn-show-shape" onclick="shapehandler()">Show Polygon Shapes</button>
  </div>
  <div id="drawing">
  </div>

Answer 1

Я держу ваш HTML.

CSS ваш, но я добавил правило для строк.Устанавливает stroke-width.Для лучшего эффекта stroke-linecap равно round.

Самое важное: я использую vector-effect:non-scaling-stroke.Так как я не знаю, насколько я буду масштабировать группу, мне нужно vector-effect:non-scaling-stroke, которое не влияет на ширину обводки объекта при преобразованиях и масштабировании.

В javaScript я сохраняю все ваши данные(точки и цвета), а остальное я переписал.

Самое главное;Я рассчитываю масштаб, который зависит от ширины ограничительной рамки группы.Я перевожу группу в центре холста SVG и масштабирую ее.

Надеюсь, это то, что вам нужно.

const SVG_NS = 'http://www.w3.org/2000/svg';
const W = 400,cx = W/2;
const H = 400,cy = H/2;

let obj = {
    type: "polygon",
    coords: [
        [
            [0, 0],
            [30, 0],
            [30, 20],
            [60, 20],
            [60, 40],
            [0, 40],
            [0, 0]
        ],
        [
            [0, 0],
            [10, 50],
            [50, 10],
            [0, 0]
        ],
        [
            [0, 0],
            [60, 0],
            [80, 40],
            [0, 40],
            [0, 0]
        ],
        [
            [0, 0],
            [50, 0],
            [50, 20],
            [0, 20],
            [0, 0]
        ],
        [
            [50, 10],
            [40, 40],
            [20, 40],
            [10, 20],
            [50, 10]
        ],
        [
            [15, 5],
            [40, 10],
            [10, 20],
            [5, 10],
            [15, 5]
        ],
        [
            [20, 35],
            [10, 30],
            [10, 10],
            [30, 5],
            [45, 20],
            [20, 35]
        ]
    ]
};

let colorShade = [
            '#FFDC0B',
            '#002438',
            '#9B56BB',
            '#c6c7e2',
            '#318700',
            '#fe854f',
            '#FF8400',
            '#31d0c6',
            '#7c68fc',
            '#61549C',
            '#6a6c8a',
            '#4b4a67',
            '#3c4260',
            '#33334e',
            '#222138'
        ];


// create a new SVG element
let svg = drawSVGElmt(
"svg",
{
viewbox:`0 0 ${W} ${H}`,
preserveAspectRatio:"xMidYMid meet",
}, 
drawing);

// create a group element
let group = drawSVGElmt(
"g",
{/*transform:"translate(90,90) scale(3)"*/},
svg
)


// draw a red dot in the middle of the canvas
drawSVGElmt("circle",{cx:cx,cy:cy,r:5,fill:"red"},svg)


let n = 0;



function drawAndScale(n){
  //first remove all the lines from the group
  while (group.firstChild) {
    group.removeChild(group.firstChild);
  }
  
  // for all the points in obj.coords[n] draw a line
  for(let i = 0, l = obj.coords[n].length -1; i < l; i++){
    
  let p0 = obj.coords[n][i];
  let p1 =  obj.coords[n][i + 1];
  let x1 = p0[0],y1 = p0[1];
  let x2 = p1[0],y2 = p1[1];
  let stroke = colorShade[i];
    
  drawSVGElmt("line", {x1:x1,y1:y1,x2:x2,y2:y2,stroke:stroke}, group)
}

//get the size of the bounding box of the group
let BB = group.getBBox();

// set the scate using the width of the bounding box
let scale = (W * .75) / BB.width;
  
// scale & translate the group in the crnter of the SVG element
group.setAttributeNS(null,"transform",
`translate(${ scale * (-BB.x -BB.width/2)}, ${ scale * (-BB.y -BB.height/2)}) 
scale(${scale})
translate(${cx/scale}, ${cy/scale})`); 
}



drawAndScale(n);

function shapehandler(){
  if(n < obj.coords.length - 2){ n++; }else{n = 0};
  drawAndScale(n);
}
       


// a function to draw an SVG element
function drawSVGElmt(type, o, _parent) {
  let elmt = document.createElementNS(SVG_NS, type);
  for (var name in o) {
    if (o.hasOwnProperty(name)) {
      elmt.setAttributeNS(null, name, o[name]);
    }
  }
  _parent.appendChild(elmt);
  return elmt;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: Arial;
}
svg {
    width: 100%;
    height: 100%;
  }
#drawing{
    margin: 20px;
    display: inline-block;
    position: relative;
    border: 1px solid;
    overflow:hidden;
    box-sizing: border-box;
    width:400px;
    height:400px;
}


line{
  stroke-width:50px;
  stroke-linecap: round;
  /* vector-effect:non-scaling-stroke causes an object's stroke-width to be unaffected by transformations and zooming */
  vector-effect:non-scaling-stroke;}

<div id="toolbar">
<button type="button" id="btn_show_shape" onclick="shapehandler()">Show Polygon Shapes</button>
</div>
<div id="drawing">
</div>