홈>
문제 :
다음 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
)
)-작동하지만 방사형 그래디언트가 작동합니다.
질문 :
<올>또는
- HTML 및 CSS로이 요소를 만드는 방법이 있습니까?
내가 찾은 모든 정보는 문제를 해결하지 못합니다 :
- 원의 배경은 투명해야합니다
- 그라디언트는 원을 중심으로 등급이 있습니다 (위에서 아래로가 아님)
P. S. svg의 예상보기 :
- 답변 # 1
관련 자료
- javascript - 내 코드가 forEach 메소드에서 작동하지 않습니다
- expo - @ react-native-community/datetimepicker는 iOS 14에서 작동하지 않습니다
- deno - 명령 줄을 사용하여 대화 형으로 작업 할 수 있습니까?
- json - PHP에서 curl로 API 응답이 표시되지 않음
- amazon web services - CloudFront 사전 서명 URL을 사용하는 방법
- redirect - 사이트가 nginx로 리디렉션되지 않는 이유
- minOccurs maxOccurs가 dita와 작동하지 않습니까?
- c - 왜 printf가 원하는대로 작동하지 않습니까?
- javascript - 스위치에 문제가 있습니다 한 번만 작동하지만 두 번은 작동하지 않습니다
- twitter bootstrap - 드롭 다운이 각도로 열리지 않습니다
- excel - vlookup을 통해 내 코드에 어떤 문제가 있는지 잘 모르겠습니다
- flexbox - 사용 가능한 공간을 채우지 않기 위해 SVG를 얻는 방법?
- Kubernetes에서 DNS가 제대로 작동하지 않습니다
- php - datetime - : createfromformat으로 연도를 추출 할 수 없습니다
- ios - 실행 취소가 제대로 작동하지 않는 CGBitmapContextCreate
- mongodb - 파이프 라인이 데이터를 채우지 않는 $lookup?
- css - 단위 px를 가진 Firefox svg stroke-dasharray
- javascript - documentdocumentElementstylesetProperty ( '-some-color', 'green')가 IE에서 작동하지 않습니다
- amazon web services - aws-appsync에서 관계로 작업하는 방법은 무엇입니까?
- d3.js - d3exit () remove ()가 예상대로 작동하지 않습니다
관련 질문
- html : 다른 브라우저에 비해 SVG 이미지가 표에 제대로 표시되지 않음
- javascript : 테두리의 점 길이 늘리기
- css : WP Elementor의 두 가지 색상을 로고로 사용하는 SVG
- SVG 이미지가있는 CSS 커서 포인터
- css : IE11에서 SVG 원 중심 정렬이 작동하지 않음
- html : SVG에 둘 이상의 '폴리 라인'이 있습니까?
- CSS 필터를 적용하면 iOS 및 Safari에서 인라인 SVG가 사라집니다.
- html : SVG 형제가있을 때 CSS 원 너비가 지워짐
- css : Safari에서 스트로크 대시 오프셋 결함이 발생합니까? 모바일과 Mac 모두
- html : 애니메이션 SVG 이미지 만들기
현재
mask
가 포함 된 CSS 만 사용하여이 작업을 수행 할 수 있습니다 그리고conic-gradient
하지만 둘 다에 대한 지원은 여전히 낮습니다.아래 예는 크롬에서만 작동합니다 :