SVG 이미지 태그의 비트 맵 위치

Question

Jenkov's excellent tutorials 및 MDN을 참조 했으므로 SVG 내부에서 비트 맵을 정렬하는 방법을 여전히 이해할 수 없습니다. 왼쪽 위 모서리에 비트 맵을 배치하고 싶지만 기본값은 IMAGE 태그에서 내 X 및 Y 값을 무시하는 것 같습니다. 여기

코드이다 : 대신에 X가되는 (이 경우 수직 방향)

<svg width="600" height="400" viewBox="0 0 600 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink"> 
     <rect x="0" y="0" width="100%" height="100%" style="fill: pink"/> 
     <image x="0" y="0" width="100%" height="100%" xlink:href="http://www.google.co.uk/images/srpr/logo3w.png"/> 
    </svg> 

왜 이미지 중심, Y 값 I가 되었습니까? 이미지 종횡비가 보존되므로

https://jsfiddle.net/MCAU/0x2moakt/

Answer 1

.

이미지의 가로 세로 비율이 사용자가 지정한 공간과 같지 않습니다. preserveAspectRatio를 사용하여이 동작을 제어 할 수 있습니다. 기본값은 "xMidYMid meet"입니다. 이미지 태그에 preserveAspectRatio="xMinYMin meet"을 설정하여 원하는 것을 얻을 수 있습니다. 가능한 값

<image x="0" y="0" width="100%" height="100%" preserveAspectRatio="xMinYMin meet" xlink:href="http://www.google.co.uk/images/srpr/logo3w.png"/> 

의미는 이하와 같다 :

x 방향으로 더 많은 공간이

• xMin 정렬 중앙 좌측

• xMid 정렬하기가 있는지

• xMax 오른쪽에 정렬

귀하의 y 방향과 동일합니다.

YMax 정렬 버튼을 가운데 상단

YMid 정렬에

• YMin 정렬 이미지의 높이보다 가능한 더 높이가있는 경우

그것은이다 항상 이러한 x와 y 값의 결합은 meet 또는 slice로 이어지며, 여기서 meet은 축소를 의미합니다. 이미지에 맞게 슬라이스는 이미지를 잘리는 것을 의미합니다.

또는 preserveAspectRatio="none" 값을 지정할 수 있습니다. 그러면 이미지가 늘어납니다.

<h2>meet</h2> 
 
<h3>xMin</h3> 
 
<svg width="200" height="100" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <rect width="100%" height="100%" fill="gray"/> 
 
    <image preserveAspectRatio="xMinYMid meet" 
 
     width="100%" height="100%" 
 
     xlink:href="http://sourcingrecruitment.info/wp-content/uploads/2015/05/stackoverflow.png"/> 
 
    <rect width="100%" height="100%" fill="none" stroke="blue" stroke-width="2"/> 
 
</svg> 
 
<h3>xMid</h3> 
 
<svg width="200" height="100" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <rect width="100%" height="100%" fill="gray"/> 
 
    <image preserveAspectRatio="xMidYMid meet" 
 
     width="100%" height="100%" 
 
     xlink:href="http://sourcingrecruitment.info/wp-content/uploads/2015/05/stackoverflow.png"/> 
 
    <rect width="100%" height="100%" fill="none" stroke="blue" stroke-width="2"/> 
 
</svg> 
 

 
<h3>xMax</h3> 
 
<svg width="200" height="100" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <rect width="100%" height="100%" fill="gray"/> 
 
    <image preserveAspectRatio="xMaxYMid meet" 
 
     width="100%" height="100%" 
 
     xlink:href="http://sourcingrecruitment.info/wp-content/uploads/2015/05/stackoverflow.png"/> 
 
    <rect width="100%" height="100%" fill="none" stroke="blue" stroke-width="2"/> 
 
</svg> 
 

 
<h3>YMin</h3> 
 
<svg width="100" height="200" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <rect width="100%" height="100%" fill="gray"/> 
 
    <image preserveAspectRatio="xMidYMin meet" 
 
     width="100%" height="100%" 
 
     xlink:href="http://sourcingrecruitment.info/wp-content/uploads/2015/05/stackoverflow.png"/> 
 
    <rect width="100%" height="100%" fill="none" stroke="blue" stroke-width="2"/> 
 
</svg> 
 

 
<h3>YMid</h3> 
 
<svg width="100" height="200" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <rect width="100%" height="100%" fill="gray"/> 
 
    <image preserveAspectRatio="xMidYMid meet" 
 
     width="100%" height="100%" 
 
     xlink:href="http://sourcingrecruitment.info/wp-content/uploads/2015/05/stackoverflow.png"/> 
 
    <rect width="100%" height="100%" fill="none" stroke="blue" stroke-width="2"/> 
 
</svg> 
 

 
<h3>YMax</h3> 
 
<svg width="100" height="200" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <rect width="100%" height="100%" fill="gray"/> 
 
    <image preserveAspectRatio="xMidYMax meet" 
 
     width="100%" height="100%" 
 
     xlink:href="http://sourcingrecruitment.info/wp-content/uploads/2015/05/stackoverflow.png"/> 
 
    <rect width="100%" height="100%" fill="none" stroke="blue" stroke-width="2"/> 
 
</svg> 
 

 
<h2>slice</h2> 
 
<h3>xMin</h3> 
 
<svg width="100" height="200" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <rect width="100%" height="100%" fill="gray"/> 
 
    <image preserveAspectRatio="xMinYMid slice" 
 
     width="100%" height="100%" 
 
     xlink:href="http://sourcingrecruitment.info/wp-content/uploads/2015/05/stackoverflow.png"/> 
 
    <rect width="100%" height="100%" fill="none" stroke="blue" stroke-width="2"/> 
 
</svg> 
 
<h3>xMid</h3> 
 
<svg width="100" height="200" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <rect width="100%" height="100%" fill="gray"/> 
 
    <image preserveAspectRatio="xMidYMid slice" 
 
     width="100%" height="100%" 
 
     xlink:href="http://sourcingrecruitment.info/wp-content/uploads/2015/05/stackoverflow.png"/> 
 
    <rect width="100%" height="100%" fill="none" stroke="blue" stroke-width="2"/> 
 
</svg> 
 

 
<h3>xMax</h3> 
 

 
<svg width="100" height="200" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <rect width="100%" height="100%" fill="gray"/> 
 
    <image preserveAspectRatio="xMaxYMid slice" 
 
     width="100%" height="100%" 
 
     xlink:href="http://sourcingrecruitment.info/wp-content/uploads/2015/05/stackoverflow.png"/> 
 
    <rect width="100%" height="100%" fill="none" stroke="blue" stroke-width="2"/> 
 
</svg> 
 

 
<h3>YMin</h3> 
 

 
<svg width="200" height="100" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <rect width="100%" height="100%" fill="gray"/> 
 
    <image preserveAspectRatio="xMidYMin slice" 
 
     width="100%" height="100%" 
 
     xlink:href="http://sourcingrecruitment.info/wp-content/uploads/2015/05/stackoverflow.png"/> 
 
    <rect width="100%" height="100%" fill="none" stroke="blue" stroke-width="2"/> 
 
</svg> 
 

 
<h3>YMid</h3> 
 

 
<svg width="200" height="100" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <rect width="100%" height="100%" fill="gray"/> 
 
    <image preserveAspectRatio="xMidYMid slice" 
 
     width="100%" height="100%" 
 
     xlink:href="http://sourcingrecruitment.info/wp-content/uploads/2015/05/stackoverflow.png"/> 
 
    <rect width="100%" height="100%" fill="none" stroke="blue" stroke-width="2"/> 
 
</svg> 
 

 
<h3>YMax</h3> 
 

 
<svg width="200" height="100" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <rect width="100%" height="100%" fill="gray"/> 
 
    <image preserveAspectRatio="xMidYMax slice" 
 
     width="100%" height="100%" 
 
     xlink:href="http://sourcingrecruitment.info/wp-content/uploads/2015/05/stackoverflow.png"/> 
 
    <rect width="100%" height="100%" fill="none" stroke="blue" stroke-width="2"/> 
 
</svg> 
 

 
<h2>none</h2> 
 

 
<svg width="200" height="100" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <rect width="100%" height="100%" fill="gray"/> 
 
    <image preserveAspectRatio="none" 
 
     width="100%" height="100%" 
 
     xlink:href="http://sourcingrecruitment.info/wp-content/uploads/2015/05/stackoverflow.png"/> 
 
    <rect width="100%" height="100%" fill="none" stroke="blue" stroke-width="2"/> 
 
</svg> 
 

 
<svg width="100" height="200" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <rect width="100%" height="100%" fill="gray"/> 
 
    <image preserveAspectRatio="none" 
 
     width="100%" height="100%" 
 
     xlink:href="http://sourcingrecruitment.info/wp-content/uploads/2015/05/stackoverflow.png"/> 
 
    <rect width="100%" height="100%" fill="none" stroke="blue" stroke-width="2"/> 
 
</svg>