SVG로 그리기
index.html
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8" />
<title>SVG</title>
</head>
<body>
<h2>SVG</h2>
<svg width="500" height="400">
<circle cx="100" cy="60" r="50" fill="#e74c3c" stroke=black />
<ellipse cx="100" cy="170" rx="20" ry="40" fill="red" stroke="red" />
<ellipse cx="100" cy="300" rx="60" ry="20" fill="#3498db" stroke="#333333" />
<rect x="200" y="20" width="250" height="80" fill=blue stroke=blue />
<rect x="200" y="120" width="250" height="80" rx="20" ry="20" fill=yellow stroke="#333333" />
<line x1="200" y1="250" x2="350" y2="350" stroke="#333333" />
<line x1="250" y1="250" x2="400" y2="350" stroke=magenta stroke-width="10" />
<line x1="300" y1="250" x2="450" y2="350" stroke="#333333" stroke-width="5" stroke-dasharray="5 10" />
<polyline points="20,180 70,120 120,120 170,180 120,240 70,240" fill="none" stroke=green stroke-width="5" />
<polygon points="0,0 500,0 500,400 0,400" fill="none" stroke=cyan stroke-width="5" />
</svg>
<hr />
version Jan/07/2018 PM 17:14<p />
</body>
</html>
svg 를 외부 파일로 해 jQuery 로 읽어들이는 샘플입니다.
jQuery로 SVG 파일로드
참고로 한 페이지
SVG 요소로 도형을 그리기【HTML5 실천편】
Reference
이 문제에 관하여(SVG로 그리기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/ekzemplaro/items/4449dce6c8420b908664텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
