SVG 부모 요소의 오른쪽 하단에 맞 춥니 다

Question

SVG (300x300 px)에서 rect를 그리고 부모 Rect (10x10 픽셀)의 각 구석에 4 개의 작은 rect를 정렬하려고 시도하지만 모든 작은 자식 rect는 부모 직사각형의 전체 크기

<svg width="300" height="300"> 
    <svg height="10" width="10" /> 
    <svg height="10" width="10" /> 
    <svg height="10" width="10" /> 
    <svg height="10" width="10" /> 
</svg> 

당신은 여기 내 결과를 볼 수 있습니다 : http://jsfiddle.net/8tY3b/

나는 그것이 오른쪽 아래 하나를 제외한 모든 에지와 함께 작동 10px하는 내부 SVG 요소의 너비 또는 높이를 설정합니다.

상위 요소의 오른쪽 하단에 하위 요소를 정렬하는 방법이 있습니까?

Answer 1

svg 요소를 삽입하거나 사각형을 그리시겠습니까? 경우에 당신은 당신이 가서 여기에, 후자 만족 :

는

<?xml version="1.0" encoding="utf-8"?> 
<!-- SO: http://stackoverflow.com/questions/15495978/svg-circled-text-on-textpath-center-align --> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xhtml="http://www.w3.org/1999/xhtml" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    version="1.1" 
    width="15cm" height="15cm" 
    viewBox="0 0 300 300" 
    preserveAspectRatio="none" 
    style="background-color:white; border: solid 1px black;" 
> 
    <rect fill="green" stroke="blue" stroke-width="2" height="10" width="10" x="0" y="0"/> 
    <rect fill="green" stroke="blue" stroke-width="2" height="10" width="10" x="290" y="0"/> 
    <rect fill="green" stroke="blue" stroke-width="2" height="10" width="10" x="0" y="290"/> 
    <rect fill="green" stroke="blue" stroke-width="2" height="10" width="10" x="290" y="290"/> 
</svg> 

속성 preserveAspectRatio의 값 none은 arbitraty 스케일링 수 있습니다.