html svg circle 요소를 css로 제어하는 방법 질문입니다
조회수 1557회
<svg height="200" width="200">
<circle class="circle" cx="100" cy="100" r="95" stroke="#231f20" stroke-width="10" fill-opacity="0" />
</svg>
body {
height: 100vh;
position: relative;
background-color: #f5f5f5;
}
svg,{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.circle {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: stroke 2s ease-out forwards;
}
@keyframes stroke {
to {
stroke-dashoffset: 0;
}
}
와 같은 기본적인 코드에서 궁금한 것이 있습니다. circle 의 size를 부모인 svg 크기에 비례해서 키울 수 있는 방법이 있나요? cx="100" cy="100" r="95" 와 같이 정의되어 있는 요소를 css로 컨트롤 하고 싶어요, width80%, height80%와 같이요!!
-
(•́ ✖ •̀)
알 수 없는 사용자
1 답변
-
저도 몰랐는데 scale svg로 찾아보니
viewBox라는 것을 도입하면 되는 문제네요. 데모 확인해 보세요.<!-- 이 SVG 아래 모든 요소가 200*200 박스에 들어간다고 지정하면 --> <svg id="svg" viewBox="0 0 200 200"> <!-- 그 아래 요소들의 수치는 그 박스 크기를 기준으로 계산되므로 --> <circle class="circle" cx="100" cy="100" r="95" stroke="#231f20" stroke-width="10" fill-opacity="0" /> </svg>/* 마치 이미지의 가로세로를 지정하듯이 */ #svg { /* 원하는 가로/세로를 지정해 맞추도록 할 수 있습니다. */ width: 40px; /* 심지어 이것도 되네요. */ height: auto; }+ 화면 전체를 텅 비우고 어떤 인라인 엘리먼트 하나만 한가운데에 놓는 방법은
translate()를 포함해 여러 가지가 있습니다만 저는 table 레이아웃을 강력히 추천해 드립니다. 이게 실제로 개체를 놓을 위치를 통제하기가 가장 수월하고 호환성이 좋습니다. 데모에 적용했으니 참고해 보세요.
댓글 입력