SVG 이미지를 구성하는 스트로크의 그래디언트 색상을 만들 수 있습니까?

아래의 두 줄에 나타나는 획 색상에서 그래디언트를 수행 할 수 있는지 알고 싶습니다. # 389967로 설정되어 있습니다. . 이것은 SCS들에있어, 전체 소스 코드는 여기에서 찾을 수 있습니다SVG 이미지를 구성하는 스트로크의 그래디언트 색상을 만들 수 있습니까?

.chart-three svg .circle-foreground { 

    stroke: #389967; 
    stroke-dasharray: 494.55px 549.5px; 
    stroke-dashoffset: 494.55px; 
    stroke-linecap: round; 
    -webkit-transform-origin: 50% 50%; 
      transform-origin: 50% 50%; 
    -webkit-transform: rotate(-90deg); 
      transform: rotate(-90deg); 
}

SVG,하지만 당신은 CSS로 컴파일 할 수있다 : 나는 전경 색상을 변경 찾고 있어요

https://codepen.io/kunalkamble/pen/XXbWwN

이 차트에서 그래디언트를 얻으려면 가능한지 알 수 있습니까?

나는 에너지 소비의 미터와 같은 측정하고자하는

가되면 녹색으로 0 %에 가까운입니다 그것은 100 %에 근접하는 경우에 사용 행할 사전

출처

2017-10-09 Diego Hincapie

귀하의 코드 팸이 울려 퍼지고 재로드 루프에 걸렸습니다. 사이트에 문제가 있거나 코드에 뭔가있는 것이 확실하지 않습니다! – will

링크를 업데이트했습니다. 다시 시도해주세요. –

에서

감사 빨간색 스트로크에 SVG 패턴으로 저장되는 이미지로 가장자리를 더 이상 둥글 수 없습니다. 스트로크 캡은 기술적으로 요소의 시작 부분을 지나치므로 제거하지 않으면 그라디언트 (빨간색)의 100 % 가치가 희미 해집니다.

https://codepen.io/will0220/pen/xXjKry

<svg role="img" xmlns="http://www.w3.org/2000/svg"> 
    <defs> 
    <pattern id="fillColors" patternUnits="userSpaceOnUse" width="200" height="200"> 
     <image xlink:href="http://willmurdoch.com/images/strokeGrad.jpg" width="200" height="200" /> 
    </pattern> 
    <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%"> 
     <stop offset="0%" stop-color="red"/> 
     <stop offset="100%" stop-color="green"/> 
    </linearGradient> 
    </defs> 
</svg>

그런 다음 사용 전경색으로 그. 내가 한 동일한 이미지를 사용하려는 경우 개인 서버에 호스팅되어 있으므로 위 링크에서 이미지를 저장하고 다른 곳에 다시 업로드하십시오.

출처

2017-10-09 18:15:02 will

SVG 이미지를 구성하는 스트로크의 그래디언트 색상을 만들 수 있습니까?

답변

관련 문제