>

문제 :

다음 svg 코드는 브라우저에서 작동하지 않습니다 :

<svg width="207" height="209" viewBox="0 0 207 209" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M96.2318 8.29356C149.379 4.30837 195.684 44.2918 199.657 97.599C203.631 150.906 163.767 197.351 110.62 201.336C57.473 205.321 11.1677 165.338 7.19452 112.031C3.2213 58.7234 43.0847 12.2787 96.2318 8.29356Z" stroke="url(#paint0_angular)" stroke-width="2"/>
    <defs>
        <radialGradient id="paint0_angular" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(103.426 104.815) rotate(-94.2626) scale(96.7891 96.5016)">
            <stop stop-color="#FF7870"/>
            <stop offset="1" stop-color="#FF7870" stop-opacity="0"/>
        </radialGradient>
    </defs> 
</svg>

stroke 를 교체하는 경우   path 에 공헌  간단한 색상의 svg 조각 (예 : #f00 ) )-작동하지만 방사형 그래디언트가 작동합니다.

<시간>

질문 :

<올>
  • 이 svg를 브라우저에 유효하게 만드는 방법이 있습니까?
  • 또는

    1. HTML 및 CSS로이 요소를 만드는 방법이 있습니까?

    내가 찾은 모든 정보는 문제를 해결하지 못합니다 :

    • 원의 배경은 투명해야합니다
    • 그라디언트는 원을 중심으로 등급이 있습니다 (위에서 아래로가 아님)
    <시간>

    P. S. svg의 예상보기 :


    • 답변 # 1

      현재 mask 가 포함 된 CSS 만 사용하여이 작업을 수행 할 수 있습니다  그리고 conic-gradient  하지만 둘 다에 대한 지원은 여전히 ​​낮습니다.

      아래 예는 크롬에서만 작동합니다 :

      .box {
        width:200px;
        height:200px;
        margin:20px auto;
        border-radius:50%;
        background:conic-gradient(transparent,red);
        -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 10px),#fff calc(100% - 9px));
        mask:radial-gradient(farthest-side,transparent calc(100% - 10px),#fff calc(100% - 9px));
      }
      body  {
        background:url(https://picsum.photos/id/100/1000/1000) center/cover;
      }
      
      
      <div class="box">
      </div>
      
      

  • 이전 visual studio - MicrosoftBuild 1630 패키지가 netstandard 20 오류와 호환되지 않습니다
  • 다음 google play - Android 애플리케이션이 기기와 호환되지 않습니다