SVG에서 테두리가 벗겨진 원을 그리는 방법은 무엇입니까?
OneEast
SVG에서 테두리가 제거 된 원을 그리는 방법. 첨부 된 이미지와 같은 것?
<svg width="25%" height="25%" viewBox="0 0 120 120">
<circle class="default" cx="25" cy="25" r="24" fill="none" stroke="black" stroke-width="1"/>
<circle class="default" cx="25" cy="25" r="16" fill="none" stroke="black" stroke-width="1"/>
</svg> Alexandr_TT
사용하여 원 stroke-dasharray을 8 부분으로 나눌 필요가 있습니다.
- 반경 20의 원주는
2 * 3.14 * 20 = 125.6 - 8 개 부분으로 나누어서 원의 4 개 섹터를 얻으십시오. 각 섹터에는 선과 공백이 있습니다.
125.6 / 8 = 15.7
stroke-dasharray="15.7, 15.7", 여기서 첫 번째 값은 대시의 길이이고 두 번째 값은 공백입니다.
<svg width="30%" height="30%" viewBox="0 0 120 120">
<!-- Outer circle -->
<circle class="default" cx="25" cy="25" r="24" fill="none" stroke="black" stroke-width="1"/>
<!-- The circle is divided into 4 sections -->
<circle class="default" cx="25" cy="25" r="20" fill="none" stroke="black"
stroke-width="8" stroke-dasharray="15.7, 15.7 "/>
<!--Inner circle -->
<circle class="default" cx="25" cy="25" r="16" fill="none" stroke="black" stroke-width="1"/>
</svg>최신 정보
8 개 분야
<svg width="30%" height="30%" viewBox="0 0 120 120">
<!-- Outer circle -->
<circle class="default" cx="25" cy="25" r="24" fill="none" stroke="black" stroke-width="1"/>
<!-- The circle is divided into 4 sections -->
<circle class="default" cx="25" cy="25" r="20" fill="none" stroke="black"
stroke-width="8" stroke-dasharray="7.85"/>
<!--Inner circle -->
<circle class="default" cx="25" cy="25" r="16" fill="none" stroke="black" stroke-width="1"/>
</svg>@enxaneta 주석으로
대시 높이는 스트로크 너비입니다. 따라서 스트로크 너비 = 반경 / 5를 설정할 수 있습니다.
stroke-width="4"
대시 사이의 간격을 투명하지 않고 흰색으로 채우는 방법 : 흰색 테두리가있는 다른 원과 점선 아래에 동일한 획 너비를 그립니다.
두 번째 원 추가
<circle class="gold" cx="25" cy="25" r="20" fill="none" stroke="gold"
stroke-width="4" stroke-dasharray="7.85" />
다른 색상을 추가 할 수있는 노란색 섹터를 추가했습니다.
<svg width="360" height="360" viewBox="0 0 120 120">
<circle class="gold" cx="25" cy="25" r="20" fill="none" stroke="gold"
stroke-width="4" stroke-dasharray="7.85" />
<circle class="black" cx="25" cy="25" r="20" fill="none" stroke="black"
stroke-width="4" stroke-dasharray="7.85" stroke-dashoffset="7.85"/>
</svg><svg width="360" height="360" viewBox="0 0 120 120">
<circle class="gold" cx="25" cy="25" r="20" fill="none" stroke="gold"
stroke-width="4" troke-dasharray="7.85" />
<circle class="black" cx="25" cy="25" r="20" fill="none" stroke="black"
stroke-width="4" stroke-dasharray="7.85" stroke-dashoffset="7.85"/>
</svg>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
관련 기사
Related 관련 기사
- 1
glsl에서 테두리가있는 부드러운 원을 그리는 방법은 무엇입니까?
- 2
주어진 수의 포인트에서 최고의 타원을 그리는 방법은 무엇입니까?
- 3
SVG에서 S- 곡선을 그리는 방법은 무엇입니까?
- 4
Cypress에서 숨겨진 iframe 요소를 얻는 방법은 무엇입니까? 그리고 그것을 쓰는 방법?
- 5
테두리에 버튼을 추가하는 방법은 무엇입니까?
- 6
XAML에서 별도의 원을 그리는 방법은 무엇입니까?
- 7
Elm 버전 0.18.0에서 원을 그리는 방법은 무엇입니까?
- 8
Magento 관리자 패널에서 숨겨진 탭을 활성화 /보기하는 방법은 무엇입니까?
- 9
CSS의 SVG 요소에 테두리 / 개요 / 획을 추가하는 방법은 무엇입니까?
- 10
PCA 플롯 주위에 타원을 그리는 방법은 무엇입니까?
- 11
원형 JButton 주위에 점선을 그리는 방법은 무엇입니까?
- 12
cellForRowAtIndexPath에서 textField에 테두리 선을 얻는 방법은 무엇입니까?
- 13
Matlab에서 분할되고 번호가 매겨진 원본 문서에서 텍스트 문장을 선택하는 방법은 무엇입니까?
- 14
배경 위와 테두리 뒤에 버튼의 오른쪽 상단 모서리에 원을 추가하는 방법은 무엇입니까?
- 15
본문 태그에서 발생하는 테두리 / 여백을 피하는 방법은 무엇입니까?
- 16
루프에서 두 점을 그리는 방법은 무엇입니까?
- 17
서블릿의 숨겨진 필드에서 배열 값을 가져 오는 방법은 무엇입니까?
- 18
div가 숨겨진 경우에만 div에서 angularjs $ anchorScroll을 사용하는 방법은 무엇입니까?
- 19
div가 숨겨진 경우에만 div에서 angularjs $ anchorScroll을 사용하는 방법은 무엇입니까?
- 20
하위 쿼리가있는 두 테이블에서 값을 얻는 방법은 무엇입니까?
- 21
PowerPoint에서 openxml을 사용하여 셀에 테두리를 추가하는 방법은 무엇입니까?
- 22
각도 매트 테이블에 테두리 반경을 추가하는 방법은 무엇입니까?
- 23
배열에서 번호가 매겨진 변수 이름을 얻는 방법은 무엇입니까?
- 24
활성 서랍 메뉴에 왼쪽 테두리 색상을 추가하는 방법은 무엇입니까?
- 25
파이썬을 사용하여 이미지에서 그림 주위의 흰색 테두리 / 가장자리를 제거하는 방법은 무엇입니까?
- 26
html / css에서 노란색 배경을 가진 상자 안에 흰색 느낌표가있는 흰색 테두리 원을 만드는 방법은 무엇입니까?
- 27
OpenCV를 사용하여 어안 보정 이미지에 새겨진 사각형을 그리는 방법은 무엇입니까?
- 28
주어진 값에서 rStudios의 ROC 곡선을 그리는 방법은 무엇입니까?
- 29
Seaborn : 원형 플롯에서 풍속 v 방향을 그리는 방법은 무엇입니까?
몇 마디 만하겠습니다