svg에 그라디언트를 혼합 할 수 있습니까?

나는 하나가 45도 각도이고 다른 두 그라디언트와 함께 SVG 모양을 채우기 위해 싶습니다 (곱하기)이 그라데이션을 혼합하는 방법이svg에 그라디언트를 혼합 할 수 있습니까?

<linearGradient id="wave" x1="0%" x2="100%" y1="0%" y2="0%" 
spreadMethod="pad"> 
    <stop offset="0%" stop-color="gray" /> 
    <stop offset="25%" stop-color="black"/> 
    <stop offset="65%" stop-color="white"/> 
    <stop offset="100%" stop-color="gray" /> 
</linearGradient> 
<linearGradient id="red-yellow" x1="0%" x2="100%" y1="0%" y2="100%" 
spreadMethod="pad" gradientTransform="rotate(7)"> 
    <stop offset="0%" stop-color="gold" /> 
    <stop offset="30%" stop-color="gold"/> 
    <stop offset="50%" stop-color="red"/> 
    <stop offset="100%" stop-color="red" /> 
</linearGradient>

있습니까? 최종 결과는 왼쪽 상단의 '금'에서 오른쪽 하단의 '빨간색'으로 변경되고 값 (HSV와 같이)이 중간에서 낮음에서 높음에서 중간으로 변경되는 rect (또는 임의의 모양)이어야합니다. 왼쪽에서 오른쪽으로.

출처

2013-12-19 kai

방금 위에 회색 색조를 넣어, 투명성하여 흰색을 대체 할 수 없습니다 : feImage가 아닌 객체 참조) 다음은 다중 혼합을 사용하는 예입니다? – Noctua

예, 가능합니다. 포인트를 원한다면 대답을 게시하십시오. 그렇지 않으면 당황하지 말고 삭제할 수 있습니다 : P – kai

나는 단지 내가 코멘트 한 것을 게시 할 것이고, 나는 실제로 어떤 svg 표기법을 모르겠다 : P – Noctua

SVG 필터로이 작업을 수행 할 수 있으며 혼합, 화면 밝기 또는 어둡게 블렌딩을 수행 할 수 있습니다. (크롬/사파리에서는 feImage가있는 필터로 개체 가져 오기와 feImage 가져 오기의 크기 조정을 모두 지원하기 때문에 Chrome/Safari에서 완전히 올바르게 작동하지만, Firefox에서도이 기능을 사용하려면 인라인 데이터 URI를 입력으로 사용하십시오.

<svg width="600px" height="600px" viewbox="0 0 600 600"> 
    <defs> 
<linearGradient id="wave" x1="0%" x2="100%" y1="0%" y2="0%" 
spreadMethod="pad"> 
    <stop offset="0%" stop-color="gray" /> 
    <stop offset="25%" stop-color="black"/> 
    <stop offset="65%" stop-color="white"/> 
    <stop offset="100%" stop-color="gray" /> 
</linearGradient> 
<linearGradient id="red-yellow" x1="0%" x2="100%" y1="0%" y2="100%" 
spreadMethod="pad" gradientTransform="rotate(7)"> 
    <stop offset="0%" stop-color="gold" /> 
    <stop offset="30%" stop-color="gold"/> 
    <stop offset="50%" stop-color="red"/> 
    <stop offset="100%" stop-color="red" /> 
</linearGradient> 
    <rect id="wave-rect" x="0" y="0" width="400" height="400" fill="url(#wave)"/> 
     <rect id="ry-rect" x="0" y="0" width="400" height="400" fill="url(#red-yellow)"/> 
     <filter id="blend-it" x="0%" y="0%" width="100%" height="100%"> 
     <feImage xlink:href="#wave-rect" result="myWave" x="100" y="100"/> 
     <feImage xlink:href="#ry-rect" result="myRY" x="100" y="100"/> 
     <feBlend in="myWave" in2="myRY" mode="multiply" result="blendedGrad"/> 
     <feComposite in="blendedGrad" in2="SourceGraphic" operator="in"/> 
    </filter> 
    </defs> 

    <circle filter="url(#blend-it)" cx="300" cy="300" r="200"/> 

</svg>

enter image description here

출처

2013-12-19 01:04:43

Noctua가 내 문제를 해결했지만 그것이 Firefox에서 작동해야하기 때문에 내가 사용하게 될 것입니다.) 이것은 훨씬 자세하고 정확합니다. 감사! – kai

그레이 틴트는 위에 표시 할 수 있지만 투명 대신 흰색을 사용할 수 있습니다. 둘 다 병합해야합니다.

출처

2013-12-19 00:58:58 Noctua

svg에 그라디언트를 혼합 할 수 있습니까?

답변

관련 문제