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 필터를 만들 수 있는지 모르겠으니 어떤 도움을 주시면 감사하겠습니다.
이있는 RECT를 만들어보십시오 그라디언트를 적용한 다음 rect에서 feImage 필터를 가리 킵니다. –
@robert 안녕하세요. 예제 코드를 보여 주시겠습니까? 나는' '를 추가하려고 시도했으나, 해석 오류가 발생했습니다 : 접두사가 네임 스페이스에 연결되지 않았습니다 –
BigName
@RobertLongson ok xmlns : xlink = "http://www.w3.org/1999/xlink ", 이제 파싱하지만, 나는 원하는 결과를 얻지 못하고있다. 나는 내가 한 일을 보여주기 위해 그 글을 편집 할 것이다. – BigName