다른 SVG 요소 안에 SVG 요소를 반응 중심으로 배치 하시겠습니까?

Question

내가 SVG에서 매우 간단 뭔가 할 노력하고있어 각 사각형의 폭이 50 %를 가지고 있어야

두 개의 사각형으로

1. 나누기 전체 뷰포트를 각 사각형이 있어야한다
2. 폭 뷰포트의 높이 뷰포트의 높이의 100 %
3. 각 사각형의 가운데에 100px 너비 및 40px 높이의 다른 직사각형을 그립니다.
4. 더 나은 용어가 없기 때문에 각 "자식"사각형의 중심은 그들의 중심 각 "부모"사각형 - 모든 뷰포트 크기. 여기

내가 달성하고 싶은 무엇의 예이지만, <text> 요소 대신 <rect> 요소를 사용하여 :

<svg version="1.1" width="100%" height="100%"> 

    <svg x="0" y="0" width="50%" height="100%" overflow="visible"> 
    <rect x="0" y="0" width="100%" height="100%" fill="#363636"></rect> 
    <text x="50%" y="50%" text-anchor="middle" text-color="#393939">Sign In</text> 
    </svg> 

    <svg x="50%" y="0" width="50%" height="100%" overflow="visible"> 
    <rect x="0" y="0" width="100%" height="100%" fill="#999999"></rect> 
    <text x="50%" y="50%" text-anchor="middle">Sign Up</text> 
    </svg> 

</svg> 

나는 사각형이 할 수있는 방법 - 그 또는 어떤 SVG 모양, 문제?

Answer 1

반응 형 SVG 디자인의 비밀은 화면상의 각 객체가 자체적으로 <svg> 요소라는 것입니다. 즉, <svg>을 그룹 태그로 사용하십시오.

왜? <svg> 요소는 백분율을 사용하여 배치 할 수 있기 때문에.

<svg>을 왼쪽 위 모서리가 아닌 가운데로 배치하려면 transform="translate(dx,dy)" 속성을 사용하십시오.

<svg version="1.1" width="100%" height="100%"> 

    <!-- Left Column --> 
    <svg x="0" y="0" width="50%" height="100%" overflow="visible"> 

    <!-- "Parent" Rectangle --> 
    <rect x="0" y="0" width="100%" height="100%" fill="#363636"></rect> 

    <!-- "Child" Rectangle with Text --> 
    <svg x="50%" y="50%" width="116" height="40" overflow="visible"> 
     <rect x="0" y="0" width="100%" height="100%" rx="20" ry="20" fill="#FFFFFF" transform="translate(-58, -25)"></rect> 
     <text x="0" y="0" text-color="#393939" transform="translate(-29, 0)">Sign Up</text> 
    </svg> 

    </svg> 

    <!-- Right Column --> 
    <svg x="50%" y="0" width="50%" height="100%" overflow="visible"> 

    <!-- "Parent" Rectangle --> 
    <rect x="0" y="0" width="100%" height="100%" fill="#999999"></rect> 

    <!-- "Child" Rectangle with Text --> 
    <svg x="50%" y="50%" width="100" height="40" overflow="visible"> 
     <rect x="0" y="0" width="100%" height="100%" rx="20" ry="20" fill="#FFFFFF" transform="translate(-50, -25)"></rect> 
     <text x="0" y="0" text-color="#393939" transform="translate(-25, 0)">Sign In</text> 
    </svg> 

    </svg> 

</svg> 

(맥 OS X 크롬에서 테스트 : 예제의 경우

, 자신의 <svg> 부모 내부의 텍스트와 "아이"사각형을 가하고, 그리고 그 변형은 원하는 효과를 가져옵니다 39.0 및 iOS 8.1.2 Safari)