내부 및 외부 SVG 용 클립 경로

Question

내부 및 외부 SVG를 사용하여 삼각형을 만들려고합니다.

하지만 어떤 이유로 작동하지 않습니다. http://cssplant.com/clip-path-generator

하고 "포인트"내 내부 및 외부 SVG하지만 운에 완벽 클립 삼각형을 만들 좌표 것 얻을 :

나는 여기에이 도구를 사용하려고 노력했다.

여기 내 HTML입니다 :

<figure class="clip-holder"> 
    <img src="https://www.thesun.co.uk/wp-content/uploads/2016/06/nintchdbpict000244881006.jpg" class="clip-svg-inline" width="200" height="200"> 
    <figcaption>Inline SVG</figcaption> 
    </figure> 

    <figure class="clip-holder"> 
    <img src="https://www.thesun.co.uk/wp-content/uploads/2016/06/nintchdbpict000244881006.jpg" width="200" height="200"> 
    <figcaption>External SVG</figcaption> 
    </figure> 
</div> 

<svg class="clip-svg"> 
    <defs> 
    <clipPath id="triangle" clipPathUnits="objectBoundingBox" > 
     <polygon points="120 263,325 262,222 42"/> 
    </clipPath> 
    </defs> 
</svg>   

그리고 여기에 CSS의 :

.clip-holder { 
    display: inline-block; 
    padding: 0; 
    margin: 30px; 
} 

.clip-css { 
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%); 
clip-path: polygon(50% 0%, 0% 100%, 100% 100%); 
} 

.clip-svg { 
    width: 0; 
    height: 0; 
    margin: 0 auto; 
} 

.clip-svg-inline { 
    -webkit-clip-path: url("#triangle"); 
    clip-path: url("#triangle"); 
} 



.clip-svg-external { 
    -webkit-clip-path: url("https://www.thesun.co.uk/wp-content/uploads/2016/06/nintchdbpict000244881006.jpgt"); 
    clip-path: url("https://www.thesun.co.uk/wp-content/uploads/2016/06/nintchdbpict000244881006.jpg"); 
}  

내가 어떤 실수를하고 있습니까? https://jsfiddle.net/stjtudvj/

이 clip-path 속성의 실제 값은 SVG clipPath 수있다

Answer 1

(나에게 더 나은 이해를위한 jsfiddle 솔루션을 보여줍니다) :

다음은 JSFIDDLE입니다. 결코 JPG와 같은 이미지가 될 수 없습니다. 항상 이미지에 적용되어야하는 실제 모양이어야합니다.

예를 들어 clipPath 요소는 https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Anzeige/clip-path#Grundformen_.28basic_shapes.29입니다.
예를 들어, 달성하려고 시도한 것처럼 보이는 것이 있습니다 : https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Anzeige/clip-path#Anwendungsbeispiel.

기본적으로 모양을 설명하는 CSS 속성 clipPath를 사용하여 이미지에 미리 정의 된 모양을 적용합니다 (예 : 연결된 생성기 사용).

HTML

<img src="/path/to/my/image.jpg" id="triangle" /> 

CSS

img#triangle { 
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%); 
} 

 
(제가 위에서 언급 한 것처럼) 당신은 실제 모양을 공급하기 위해 clip-path 속성을 사용하거나 통해 URL을 : 이것처럼(). Latter는 DOM의 기존 SVG ("내부 SVG") 또는 SVG가 포함 된 실제 URL ("외부 SVG")을 가리 킵니다.
예 여기서 찾을 수 있습니다 나는 당신의 바이올린을 업데이트하는 예를 바탕으로 http://codepen.io/imohkay/pen/GJpxXY

 
: https://jsfiddle.net/stjtudvj/2/
나는 인라인 #triangle SVG를 해결했습니다. 값이 이미지 크기를 초과했습니다.

 
모든 브라우저가 아직 완전히이 속성을 지원하는 것을 명심하십시오 : http://caniuse.com/#search=clip-path