SVG 포지셔닝

SVG로 플레이하고 있으며 위치 지정에 몇 가지 문제가 있습니다. g그룹 태그에 포함 된 일련의 모양이 있습니다 . 컨테이너처럼 사용하기를 원했기 때문에 x 위치를 설정하면 해당 그룹의 모든 요소가 이동합니다. 그러나 그것은 가능하지 않은 것 같습니다.

1. 대부분의 사람들은 이동하려는 요소 그룹을 어떻게 배치합니까?
2. 상대 위치 개념이 있습니까? 예를 들어 부모와 관련

g 요소의 모든 것은 현재 변환 행렬을 기준으로 배치됩니다.

내용을 옮기려면 g 요소에 변환을 넣으십시오.

<g transform="translate(20,2.5) rotate(10)">
    <rect x="0" y="0" width="60" height="10"/>
</g>

링크 : 예 에서 SVG 1.1 사양

이전 답변에 대한 더 짧은 대안이 있습니다. SVG 요소는 svg 요소를 중첩하여 그룹화 할 수도 있습니다.

<svg xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <svg x="10">
    <rect x="10" y="10" height="100" width="100" style="stroke:#ff0000;fill: #0000ff"/>
  </svg>
  <svg x="200">
    <rect x="10" y="10" height="100" width="100" style="stroke:#009900;fill: #00cc00"/>
  </svg>
</svg>

두 사각형은 동일하지만 (색상 제외) 부모 svg 요소의 x 값이 다릅니다.

http://tutorials.jenkov.com/svg/svg-element.html을 참조하십시오 .

다른 의견에서 언급했듯이 요소 의 transform속성 g은 원하는 것입니다. 주위 transform="translate(x,y)"를 움직이고 의지 g내에서 물건 을 이동하는 데 사용 g합니다 g.

여러 SVG 모양을 그룹화하고 그룹을 배치하는 두 가지 방법이 있습니다.

Aaron이 쓴 것처럼 속성과 <g>함께 처음으로 사용 transform합니다. 그러나 당신은 단지에 x속성을 사용할 수 없습니다<g> 요소에 .

다른 방법은 중첩 <svg>요소 를 사용하는 것입니다 .

<svg id="parent">
   <svg id="group1" x="10">
      <!-- some shapes -->
   </svg>
</svg>

이런 식으로 # group1 svg는 #parent에 중첩되고 x=10는 부모 svg에 상대적입니다. 그러나 요소에 transform속성을 사용할 수는 없습니다 <svg>. 이는 요소와 상당히 반대입니다 <g>.