올바르게 svg 폴리곤을 정렬하십시오.

Question

그래서 포트폴리오 페이지를 만들려고했는데 맞춤형을 사용하고 싶습니다. 그래서 div를 사용하는 대신, 배경이 img 인 svg 다각형 모양을 사용하고 있습니다. 이것은 svg를 다루는 첫 번째 시간이며, 하루 종일 문제를 해결하려고합니다.

기본적으로 문제는 왼쪽 하단의 경계선과 오른쪽 위의 경계가 내 쐐기의 가장자리를 자르는 것입니다. 다각형의 너비/높이를 줄이려고했지만 제대로 작동하지 않습니다. http://jsfiddle.net/1rmd2otz/1/

<div class="sv-img"> 
    <svg class="svg" viewBox="0 0 910 500" > 
     <defs> 
      <pattern id="img1" patternUnits="userSpaceOnUse" width="900" height="490"> 
       <image xlink:href="img/service/website.jpg" x="0" y="0" width="890" height="480" /> 
      </pattern> 
     </defs> 
     <polygon points="96.729,27.124 0,490.109 867.032,420.878 900,0" fill="url(#img1)"/> 
    </svg> 
</div> 

그래서, 누군가가 나를 도울 수 : 작거나 절단 더욱 그것을 swuare 모양 만들기에 그것은

이 작업 jsfiddle 또한 내 HTML 코드입니다 .. 유지?

Answer 1

문제가 다각형 점에있는 것 같습니다. 변경 ...

<polygon points="96.729,27.124 0,490.109 867.032,420.878 900,0" fill="url(#img1)"/> 

으로 ...

<polygon points="96.729,27.124 10,470.109 867.032,420.878 890,10" fill="url(#img1)"/> 

jsFiddle : http://jsfiddle.net/rfornal/1rmd2otz/3/

이 원하는,하지만 당신은 올바른 방향으로 움직이고해야하는지 정확히하지 않을 수 있습니다. 당신은 다른 측면에서 이것을 할 수 있고 SVG viewBox 값을 변경할 수 있습니다 (확대).

Answer 2

좋아요. 몇 가지 문제가 있습니다. 첫 번째 작업부터 시작하여 작업을 시작하겠습니다.

처음에는 다각형이 900x490이지만 크기가 890x480 인 패턴을 지정하고 있습니다. 따라서 이것이 여러분이 모서리를 "손질"하고있는 이유 중 일부입니다. 패턴이 다각형의 전체 너비와 높이를 확장하지 않습니다.

우리가 해결하면 거의 다가옵니다. 다각형 윤곽선을보다 선명하게 보여주기 위해 빨간 선을 추가했습니다.

Here's a demo.

그것은 여전히 ​​매우 옳지 않다. 상단과 하단에는 여전히 간격이 거의 없습니다. 그 이유는 다각형/패턴 (900/490 ~ = 1.84)의 종횡비가 이미지의 종횡비 (570/300 = 1.9)와 같지 않기 때문입니다. 렌더러가 수행하는 작업은 동일한 가로 세로 비율을 유지하면서 <image>에 지정된 크기에 맞게 500x370 이미지의 크기를 조정하는 것입니다. 결과적으로 900x490 패턴에서 세로 가운데에 900x473.7 (473.7 = 900/1.9)의 이미지가 생성됩니다. 그것은 위쪽과 아래쪽에 약 6 픽셀을 남깁니다.

해결할 수있는 몇 가지 방법이 있습니다. 분명히 가로 세로 비율이 정확히 일치하도록 이미지 나 다각형을 변경하는 것이 좋습니다.

이 문제를 해결하는 또 다른 방법은 이미지의 크기가 조정되는 방식을 변경하는 것입니다. 기본적으로 이미지는 지정한 너비와 높이에 맞게 크기가 조정되지만 해당 크기를 벗어나지는 않습니다. 이것은 때때로 우리가보고있는 것처럼 틈이 남아 있음을 의미합니다. 간격을 두지 않고 최대 치수에 맞게 확장되도록 지시하는 다른 크기 조정 모드로 변경할 수 있습니다. 이미지에 preserveAspectRatio="xMidYMid slice"을 설정하면됩니다.

<image xlink:href="[...snip...]" 
     x="0" y="0" width="900" height="490" preserveAspectRatio="xMidYMid slice"/> 

Here's a demo of that.

당신은 다각형이 지금 완전히 충전되어 있음을 알 수

.

You can read more about preserveAspectRatio here.