그라디언트가있는 SVG 경로

현재 SVG path with a gradient (다양한 너비와 색상의 동일한 경로가 여러 경로를 사용하여 에뮬레이션 됨)을 생성 할 수있는 스크립트 (through .py plug-ins in GIMP)가 있습니다.그라디언트가있는 SVG 경로

그러나, 나는 여러 경로를 정의 할 필요없이 비슷한 생산하는 구문이 있는지 알고 싶습니다.

그래디언트와 단일 경로를 정의하는 것과 같습니다.

svg 경로 그라디언트와 같은 키워드를 검색했으며 지금까지 발견 된 모든 경로가 그라디언트이므로 위에 표시된 것과 아무 것도 유사하지 않으므로 올바른 키워드를 찾지 못했는지 궁금합니다. 또는 그러한 것이 존재하는 경우.

출처

2017-10-04 Tin Tran

완전히 불가능한 것은 아니지만 꽤 초보적인 경우에만 사용할 수 있으며 꽤 복잡한 고리를 뛰어 넘어야합니다.

SVG는 선형 및 방사형의 두 가지 유형 만 알고 있습니다. 선형 그래디언트를 직선으로 정렬하고 방사형 그래디언트를 동그라미 또는 원호와 동일한 축으로 정렬 할 수 있습니다.

각 경로를 개별 세그먼트로 나누어야하며 직선을 연결해야하는 경우 선을 다각형으로 변환하여 모서리를 제공하십시오.

<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="200" > 
 
    <defs> 
 
    <linearGradient id="rainbow"> 
 
     <stop stop-color="rgb(255,0,0)" offset="0.8" /> 
 
     <stop stop-color="rgb(255,128,0)" offset="0.825" /> 
 
     <stop stop-color="rgb(255,255,0)" offset="0.85" /> 
 
     <stop stop-color="rgb(128,255,0)" offset="0.875" /> 
 
     <stop stop-color="rgb(0,255,0)" offset="0.9" /> 
 
     <stop stop-color="rgb(0,240,68)" offset="0.925" /> 
 
     <stop stop-color="rgb(0,160,168)" offset="0.95" /> 
 
     <stop stop-color="rgb(0,0,255)" offset="0.975" /> 
 
     <stop stop-color="rgb(255,0,255)" offset="1" /> 
 
    </linearGradient> 
 
    <radialGradient xlink:href="#rainbow" gradientUnits="userSpaceOnUse" cx="60" cy="100" r="50" fx="60" fy="100" id="rg1" /> 
 
    <radialGradient xlink:href="#rainbow" gradientUnits="userSpaceOnUse" cx="140" cy="100" r="50" fx="140" fy="100" id="rg2" /> 
 
    <linearGradient xlink:href="#rainbow" gradientUnits="userSpaceOnUse" x1="100" y1="100" x2="100" y2="50" id="lg1" /> 
 
    <linearGradient xlink:href="#rainbow" gradientUnits="userSpaceOnUse" x1="100" y1="100" x2="100" y2="150" id="lg2" /> 
 
    <linearGradient xlink:href="#rainbow" gradientUnits="userSpaceOnUse" x1="50" y1="100" x2="100" y2="100" id="lg3" /> 
 
    </defs> 
 
    <path fill="none" stroke="url(#rg1)" stroke-width="10" d="M 60 55 A 45 45 0 0 0 60 145" /> 
 
    <path fill="none" stroke="url(#rg2)" stroke-width="10" d="M 140 55 A 45 45 0 0 1 140 145" /> 
 
    <path fill="none" stroke="url(#lg1)" stroke-width="10" d="M 60 55 140 55" /> 
 
    <path fill="none" stroke="url(#lg2)" stroke-width="10" d="M 60 145 100 145" /> 
 
    <polygon fill="url(#lg3)" points="90 80 100 80 100 150 90 140" /> 
 
</svg>

출처

2017-10-04 21:07:26 ccprog

답변

관련 문제