집 >웹 프론트엔드 >H5 튜토리얼 >SVG 그리기 기능: svg는 꽃 그리기를 실현합니다(코드 포함).

SVG 그리기 기능: svg는 꽃 그리기를 실현합니다(코드 포함).

不言원래의: 2018-08-08 11:10:414225검색

이 글의 내용은 SVG 그리기 기능에 관한 것입니다. svg는 특정 참고 가치가 있는 꽃 그리기를 구현합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

5ba626b379994d53f7acf72a64f9b697 마크업과 SVG 및 VML의 중요한 차이점은 5ba626b379994d53f7acf72a64f9b697에는 JavaScript 기반 드로잉 API가 있는 반면 SVG와 VML은 XML 문서를 사용하여 드로잉을 설명한다는 것입니다.

1. XXX.svg 파일을 생성합니다. (이 파일은 빨간색 원을 만듭니다.)

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>

</svg>

SVG는 XML로 작성되어 .svg 파일로 저장됩니다. .svg 파일은 .html 파일

에서 참조되어야 합니다. 2. HTML의 svg

1) d8e2720730be5ddc9c2a3782839e8eb6 태그를 사용하세요. 는 모든 주요 브라우저에서 지원되며 허용됩니다. 스크립트 사용

참고: HTML 페이지에 SVG를 포함할 때 d8e2720730be5ddc9c2a3782839e8eb6 태그를 사용하는 것은 Adobe SVG Viewer에서 권장되는 방법입니다! 그러나 유효한 XHTML을 생성해야 하는 경우에는 d8e2720730be5ddc9c2a3782839e8eb6를 사용할 수 없습니다. HTML 사양에는 d8e2720730be5ddc9c2a3782839e8eb6 태그가 없습니다.

<embed src="rect.svg" width="300" height="100" 
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />

pluginspage: 플러그인을 다운로드할 URL을 가리킴

2) 객체 태그 사용: html4 표준 태그, 모든 최신 브라우저에서 지원, 스크립트는 허용되지 않음

<object data="rect.svg" width="300" height="100" 
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />

codebase: 다운로드할 URL을 가리킴 플러그인

3) iframe 태그: (권장)

<iframe src="rect.svg" width="300" height="100">
</iframe>

3.SVG 모양

1. 직사각형 a10102097baab50033a2cbb2534e155f

<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)"/>

style 속성 CSS 속성을 정의하려면

스트로크 폭 속성은 직사각형 테두리의 너비를 정의합니다.

획 속성은 직사각형 테두리의 색상을 정의합니다.

2, 원 bdd0a31e4d6272bab875fe95b7d361f0

3, 타원 348860460523f17fb7f1e7e3baaf257f

5, 다각형6f1cb7f8499a7e0f625f982868cbc44d

6, 폴리라인4eb1524b6a1a587c8b2b429df9a0f543

7, path

작은 꽃의 코드

flower.svg

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
     xmlns="http://www.w3.org/2000/svg">

    <circle cx="90" cy="90" r="30" fill="red" />

    <circle cx="150" cy="90" r="30" fill="yellow" />

    <circle cx="120" cy="60" r="30" fill="blue" />

    <circle cx="120" cy="120" r="30" fill="green" />
    <circle cx="120" cy="90" r="15" fill="pink"/>

    <line x1="120" y1="150" x2="120" y2="250"
    style="stroke:rgb(100,55,69);stroke-width:2"/>

    <ellipse cx="90" cy="190" rx="40" ry="10"
             style="fill:lime"/>
    <ellipse cx="150" cy="225" rx="40" ry="10"
             style="fill:lime"/>
</svg>

index .html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<iframe src="flower.svg" width="100%" height="600" style="padding: 5px">
</iframe>
</body>
</html>

Rendering

조금 못생겼지만 전체적으로는 여전히 꽃이에요! ㅎㅎ

일반적으로 svg는 그림을 그리는 데 사용되며, 다양한 그래픽을 오버레이하여 나만의 그림을 만들 수도 있습니다

SVG 그리기 기능: svg는 꽃 그리기를 실현합니다(코드 포함).

관련 기사