이미지 요소가 SVG - jquery에서 전체 사각형을 차지하지 않음

Question

아래 SVG를 참조하십시오.

<svg width="5cm" height="4cm" version="1.1" 
    xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink"> 

<rect x="0" y="0" width="150px" height="150px"/> 

    <image xlink:href="firefox.jpg" x="0" y="0" height="150px" width="150px"/> 
</svg> 

출력은 다음과 같습니다.

이 어떻게 전체 사각형을 점유 할 수있는 이미지를 만들 수 있습니까?

감사합니다,

시바는

Answer 1

작품 : http://jsfiddle.net/M24gX/

<svg width="8cm" height="8cm" version="1.1"> 
    <rect x="0" y="0" width="150px" height="150px" fill="red"/> 
    <image xlink:href="http://lorempixel.com/150/150/sports/" 
     x="0" y="0" height="150px" width="150px"/> 
</svg> 

당신의 RECT 같은 다른 화면 비율을 갖는 이미지에 대해 작동하지 않습니다

: http://jsfiddle.net/5v9bd/

<svg width="8cm" height="8cm" version="1.1"> 
    <rect x="0" y="0" width="150px" height="150px" fill="red"/> 
    <image xlink:href="http://lorempixel.com/300/150/sports/" 
     x="0" y="0" height="150px" width="150px"/> 
</svg> 

을 가로 세로 비율에 관계없이 이미지의 전체 150x150 픽셀을 채우려면

• 할당 높이 = "150 픽셀"와 너비 = "150 픽셀"
• 스케일링 비 균일을 가지고 이미지를 수 있도록 preserveAspectRatio = "없음"를 할당하지 (이미했던 것처럼)

예 : http://jsfiddle.net/Fq96J/

<svg width="8cm" height="8cm" version="1.1"> 
    <rect x="0" y="0" width="150px" height="150px" fill="red"/> 
    <image xlink:href="http://lorempixel.com/300/150/sports/" 
     x="0" y="0" height="150px" width="150px" preserveAspectRatio="none"/> 
</svg> 

preserveAspectRatio 그래서 내가 몇 가지 문서를 읽고 그것으로 조금 놀러 추천 SVG로 작업 할 때 당신은 확실히 안쪽에서 바깥 알아야 할 특성입니다. 좋은 설명은 당신이 확실

• https://developer.mozilla.org/en-US/docs/SVG/Attribute/preserveAspectRatio

Answer 2

이 my JSFiddle에 잘 작동합니다. JSFiddle에서 재현 할 수 있습니까? 당신의 RECT와 같은 화면 비율을 가진 이미지

<svg width="8cm" height="8cm" version="1.1" 
    xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink"> 

<rect x="0" y="0" width="150px" height="150px" stroke="red" stroke-width="3"/> 

    <image xlink:href="firefox.jpg" x="0" y="0" height="150px" width="150px"/> 
</svg>