SVG 안에 렌더링 할 이미지 부분을 지정하는 방법 : image 태그?

Question

많은 아이콘이있는 PNG 파일이 있습니다. 내 SVG에서 사용하고 싶습니다. 나는 svg : image 태그를 사용한다 :

<image xlink:href="icons.png" height="50px" width="50px"></image> 

이것은 전체 이미지를 렌더링한다. 렌더링 할 파일의 부분을 어떻게 지정할 수 있습니까? 내가 필요로 preserveAspectRatio 속성을 의심하지만, <image>와 함께 사용하는 방법을 알아낼 수 없습니다

업데이트 (나는 CSS의 background-position 속성의 SVG-상응하는 필요). this example을 참조하십시오.

Answer 1

preserveAspectRatio를 사용하여 제한된 방식으로이 영향을 줄 수 있습니다. 그러나 prespectRatio가 제공하는 위치 지정 옵션에 의해 제한됩니다. 스프라이트의 최대 이미지 크기가 3x3이거나 모퉁이 나 측면에 위치하는 한 작동합니다.

더 유연한 방식으로 같은 효과를 얻으려면 내가 생각할 수있는 몇 가지 다른 방법이 있습니다.

• 다른 <svg> 요소 내부 페이지
• 삽입의 이미지에주의 위치와 함께 이미지를 클립 또는 클립 경로 스타일 속성을 사용하고 원하는 스프라이트의 부분을 선택하는 뷰 박스를 사용합니다.

다음 예는 위의 세 가지 주요 기술을 보여줍니다.

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg width="8cm" height="8cm" viewBox="0 0 400 400" version="1.1" 
    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <desc>Testing image elements</desc> 

    <!-- Outline the drawing area in blue --> 
    <rect fill="none" stroke="blue" 
     x="1" y="1" width="398" height="398"/> 

    <!-- Use preserveAspectRatio to show the top 64 pixels of the image (Stack Overflow logo) --> 
    <image x="100px" y="100px" width="238px" height="64px" xlink:href="http://cdn.sstatic.net/stackoverflow/img/sprites.png" 
     preserveAspectRatio="xMinYMin slice"/> 

    <!-- Use a CSS clip rectangle to show a small facebook logo from the sprite. Logo is at 150,1000 with dimensions 19x19. 
     Positioned at 100,200 in the SVG (-50+150, -800+1000). Could also use a clip-path for this. --> 
    <image x="-50px" y="-800px" width="238px" height="1073px" xlink:href="http://cdn.sstatic.net/stackoverflow/img/sprites.png" 
     clip="rect(200 100 219 119)" /> 

    <!-- Use a svg viewBox to show the facebook logo from the sprite. 
     By setting our viewBox to the bounds of the logo, the renderer will scale it to fit the specified width and height. 
     Which in this case is 19x19 - the same size as the sprite. --> 
    <svg x="100px" y="300px" width="19px" height="19px" viewBox="150 1000 19 19" version="1.1"> 
    <image x="0px" y="0px" width="238px" height="1073px" xlink:href="http://cdn.sstatic.net/stackoverflow/img/sprites.png" /> 
    </svg> 

</svg>