2017-04-02 14 views
1

html 요소에 적용 할 때 전체 요소에 그래디언트를 적용하는 필터를 만들고 싶습니다. CSS 그라디언트는 배경에만 적용되므로 원하는 부분이 아닙니다. 내가 원하는 것은 요소에 삼각형과 원이 포함되어 있다고 가정합니다. 요소에 필터를 적용하고 삼각형과 원에 그라데이션이 적용됩니다.svg 필터를 사용하여 그래디언트를 적용하는 방법

이것은 내가 지금까지있어 무엇 :

.my-element{ 
 
    filter: url(svg.svg#filter); 
 
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
     <defs> 
 
     <linearGradient id="lightGradient" gradientTransform="rotate(-5)"> 
 
      <stop stop-color="white" stop-opacity="0.4" offset="0%"/> 
 
      <stop stop-color="white" stop-opacity="0.5" offset="5%"/> 
 
      <stop stop-color="black" stop-opacity="0.2" offset="6%"/> 
 
      <stop stop-color="black" stop-opacity="0.3" offset="19%"/> 
 
      <stop stop-color="black" stop-opacity="0.2" offset="12%"/> 
 
      <stop stop-color="white" stop-opacity="0.8" offset="13%"/> 
 
      <stop stop-color="white" stop-opacity="0.9" offset="15%"/> 
 
      <stop stop-color="white" stop-opacity="0" offset="15%"/> 
 
      <stop stop-color="white" stop-opacity="0" offset="16%"/> 
 
      <stop stop-color="white" stop-opacity="0.8" offset="16%"/> 
 
      <stop stop-color="white" stop-opacity="0.9" offset="18%"/> 
 
      <stop stop-color="white" stop-opacity="0" offset="18%"/> 
 
      <stop stop-color="white" stop-opacity="0" offset="20%"/> 
 
      <stop stop-color="white" stop-opacity="1" offset="20%"/> 
 
      <stop stop-color="white" stop-opacity="1" offset="25%"/> 
 
     </linearGradient> 
 

 
     <rect id="recGradient" x="0" y="0" width="100%" height="100%" fill="url(#lightGradient)"/> 
 

 
     <filter id="filter" primitiveUnits="objectBoundingBox"> 
 
      <feImage x="0" y="0" width="100%" height="100%" preserveAspectRatio="none" xlink:href="#recGradient"/> 
 

 
      <feComposite operator="in" in="SourceGraphic"/> 
 
     </filter> 
 
     </defs> 
 
    </svg>

편집 : 작동하는 것 같다 크롬의 요소는 바로 파이어 폭스에서 눈에 보이지 않는이됩니다 위의 코드와.

이렇게 분명히 잘못하고 있습니다. 어떻게 svg 필터를 만들 수 있는지 모르겠으니 어떤 도움을 주시면 감사하겠습니다.

+0

이있는 RECT를 만들어보십시오 그라디언트를 적용한 다음 rect에서 feImage 필터를 가리 킵니다. –

+0

@robert 안녕하세요. 예제 코드를 보여 주시겠습니까? 나는''를 추가하려고 시도했으나, 해석 오류가 발생했습니다 : 접두사가 네임 스페이스에 연결되지 않았습니다 – BigName

+0

@RobertLongson ok xmlns : xlink = "http://www.w3.org/1999/xlink ", 이제 파싱하지만, 나는 원하는 결과를 얻지 못하고있다. 나는 내가 한 일을 보여주기 위해 그 글을 편집 할 것이다. – BigName

답변

1

여기에 원하는대로 브라우저 간 필터를 구성하는 방법입니다. 당신이 DataURI 내에 적용된 그래디언트로 rect를 정의한 다음 feImage를 사용하여 필터로 가져온 다음 CSS 필터의 SVG 필터 트랩 도어를 사용하여 HTML 내용에 적용하기 때문에 sizings는 까다로운 작업입니다. 그러나 그것은 효과가있다.

(BTW - 원본 텍스트의 색상을 유지하고 불투명도 그라디언트를 적용할지 또는 흑백 그라디언트로 원래 색상을 오버라이드할지 여부는 명확하지 않습니다.이 기능을 토글 할 수 있습니다. "의"에 "IN2"를 변경 feComposite에. 이것은 당신이 그 반대의 기울기에 sourcegraphic의 불투명도를 적용하거나하고 있는지 제어합니다.)

div { 
 
    filter: url(#myGradient); 
 
}
<svg> 
 
    <defs> 
 
<filter id="myGradient" primitiveUnits="objectBoundingBox"> 
 
     <feImage x="0%" y="0%" width="100%" height="100%" preserveAspectRatio="none" xlink:href="data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%22200px%22%20height%3D%22200px%22%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3ClinearGradient%20id%3D'lightGradient'%20gradientTransform%3D'rotate(-5)'%3E%3Cstop%20stop-color%3D'white'%20stop-opacity%3D'0.4'%20offset%3D'0%25'%2F%3E%3Cstop%20stop-color%3D'white'%20stop-opacity%3D'0.5'%20offset%3D'5%25'%2F%3E%3Cstop%20stop-color%3D'black'%20stop-opacity%3D'0.2'%20offset%3D'6%25'%2F%3E%3Cstop%20stop-color%3D'black'%20stop-opacity%3D'0.3'%20offset%3D'19%25'%2F%3E%3Cstop%20stop-color%3D'black'%20stop-opacity%3D'0.2'%20offset%3D'12%25'%2F%3E%3Cstop%20stop-color%3D'white'%20stop-opacity%3D'0.8'%20offset%3D'13%25'%2F%3E%3Cstop%20stop-color%3D'white'%20stop-opacity%3D'0.9'%20offset%3D'15%25'%2F%3E%3Cstop%20stop-color%3D'white'%20stop-opacity%3D'0'%20offset%3D'15%25'%2F%3E%3Cstop%20stop-color%3D'white'%20stop-opacity%3D'0'%20offset%3D'16%25'%2F%3E%3Cstop%20stop-color%3D'white'%20stop-opacity%3D'0.8'%20offset%3D'16%25'%2F%3E%3Cstop%20stop-color%3D'white'%20stop-opacity%3D'0.9'%20offset%3D'18%25'%2F%3E%3Cstop%20stop-color%3D'white'%20stop-opacity%3D'0'%20offset%3D'18%25'%2F%3E%3Cstop%20stop-color%3D'white'%20stop-opacity%3D'0'%20offset%3D'20%25'%2F%3E%3Cstop%20stop-color%3D'white'%20stop-opacity%3D'1'%20offset%3D'20%25'%2F%3E%3Cstop%20stop-color%3D'white'%20stop-opacity%3D'1'%20offset%3D'25%25'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%0A%20%20%3Crect%20id%3D'recGradient'%20x%3D'0%25'%20y%3D'0%25'%20width%3D'100%25'%20height%3D'100%25'%20fill%3D'url(%23lightGradient)'%2F%3E%3C%2Fsvg%3E"/> 
 
    <feComposite operator="in" in2="SourceGraphic"/> 
 
</filter> 
 
    </defs> 
 
</svg> 
 

 

 

 

 
<div> 
 
    Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text Imagine a very large piece of text 
 
</div>

+0

안녕하세요, 저는 파이어 폭스를 사용하고 있으며, 코드 스 니펫을 실행할 때 어떤 것도 보지 못합니다 ... – BigName

+0

uuuh. 뭔가 내 데이터 URI와 괴롭다 –

+0

죄송합니다 - 파이어 폭스는 UTF - 8 인코딩 된 URL을 원한다 - 이것을 알고 있어야 디버그하자. 업데이트 된 예제 - 이제 작동합니다. –