<body>
<!-- 텍스트 입력 -->
<svg width="300" height="300" viewBox="0 0 300 300">
<text font-size="30" font-family="Times New Roman" x="30%" y="40%" fill="yellow" >Hyper Link</text>
<text font-size="30" font-family="Times New Roman" x="30%" y="60%" fill="none" stroke="blue" font-weight="900"
letter-spacing="5" >Hyper Link</text>
</svg>
</body>
텍스트 또한 만들어 낼 수 있으면 css에서 적용한 color는 fill로 지정하고 글자의 라인만 줄수도 있다. 그외에는 기존 css와 동일하다.
<body>
<!-- 이미지 입력 -->
<svg width="400" height="600" viewBox="0 0 400 600">
<image
x="0" y="0" width="400" height="600"
aria-label="mountine"
/>
</svg>
</body>
외부의 이미지의 경로를 설정해 넣거나 로컬 컴퓨터에 들어있는 이미지의 경로를 지정해서 넣을수도 있다. aria-label 속서을 사용해서 접근성을 높여 줄 수도 있다.
여기다가 마스크를 적용하여 원하는 모양의 도형 크기로 잘라줄수 있는데,
이때 주의할것이 입력한 아이디와 mask의 url를 동일하게 입력해주어야 한다.
포토샵에서 적용하는 마스크와 동일하게 흰색을 선명하게 마스크를 해주고 회색은 반투명 검정은 완전히 가리는것을 알수가 있다.
비슷하게 사용할 수 있는것이 clipPath인데 폰트 크기 패밀리 굵기 위치등을 정하고 해당 글자에 맞게 마스크 화해주는것이다.
<body>
<svg width="800" height="600" viewBox="0,0,800,600">
<circle cx="400" cy="300" r="50" fill="orange" stroke="#333" stroke-width="5" class="cir"/><!--센터 x 센터 y 반지름 색 선색상-->
</svg>
</body>
해당 원에 마우스를 대면 커지도록 자바스크립트를 사용해서 만들것이다.
.cir{
transition: 1s;
}
해당 내용이 부드럽게 움직이도록 css로 중간단계를 넣어주고
<body>
<svg width="800" height="600" viewBox="0,0,800,600">
<circle cx="400" cy="300" r="50" fill="orange" stroke="#333" stroke-width="5" class="cir"/><!--센터 x 센터 y 반지름 색 선색상-->
</svg>
<script>
let circle=document.querySelector(".cir");
circle.addEventListener("mouseenter", (e)=>{
let t=e.currentTarget; //화살표 함수에선 this는 window객체를 가리킨다. 그래서 정확히 지정하기 위해서 currentTarget으로 지정한다.
//여기서 변수 t를 만들고 함수명인 e에 마우스가 올려진 것을 t라고 지정한 것이다.
t.setAttribute("r", "100");//setAtrribute는 요소에 속성값의 설정이나 속성을 추가하는 메서드로 마우스를 가져다 댈때 100이라는 값이 지정되어 들어가게된다.
})//mouseover와 mouseenter를 같이 쓰는데 주로 메뉴에선 enter를 많이 사용한다. 이는 마우스를 가져갈때 라는 속성이다.
circle.addEventListener("mouseleave", (e)=>{
let t=e.currentTarget;
t.setAttribute("r", "50");
})//마우스를 뗄때를 의미하는 속성
</script>
</body>
<svg width="1000" height="100" viewBox="0,0,1000,100">
<line x1="100" y1="40" x2="800" y2="40" stroke="#333" stroke-width="5" stroke-dasharray="10">
</svg>
<svg width="1000" height="100" viewBox="0,0,1000,100">
<line x1="100" y1="40" x2="800" y2="40" stroke="#333" stroke-width="5" stroke-dasharray="100">
</svg>
<style>
svg{
border: 2px dotted dodgerblue;
margin: 30px;
}
.container{
width: 300px;
}
.container path{
fill: transparent;
stroke: #0ff;
stroke-width: 5;
stroke-dashoffset: -1530;
stroke-dasharray: 1530;
transition: 2s;
}
.container:hover path{
stroke-dashoffset: 0;
}
</style>
</head>
<body>
<div class="container">
<svg viewBox="0 0 512 512"><path d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"/></svg>
</svg>
</div>
</body>
'기록 > 수업정리_javascr' 카테고리의 다른 글
| mousewheel (0) | 2024.08.21 |
|---|---|
| GSAP 플러그 - 스크롤 트리거 (0) | 2024.08.19 |
| 객체 설명 (0) | 2024.08.12 |
| 내장객체 (날짜정보) (0) | 2024.08.02 |
| 연산자(증감, 논리) (0) | 2024.08.01 |
