SVG 그리기 기능: svg는 꽃 그리기를 실현합니다(코드 포함).-H5 튜토리얼-php.cn

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

不言

풀어 주다： 2018-08-08 11:10:41

원래의

4186명이 탐색했습니다.

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

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) 태그를 사용하세요. 는 모든 주요 브라우저에서 지원되며 허용됩니다. 스크립트 사용

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

<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. 직사각형 <직각 너비="" 높이="" 스타일="">

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

로그인 후 복사

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

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

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

2, 원 <원>

3, 타원

<ellipse cx="300" cy="150" rx="200" ry="80"
style="fill:rgb(200,100,50);
stroke:rgb(0,0,100);stroke-width:2"/>

로그인 후 복사

여기서 타원은 원형 점뿐입니다. (수학적 타원은 일반적으로 두 개의 초점을 갖는다고 합니다.)

cx 속성은 원형 점의 x 좌표를 정의합니다.

cy 속성은 원형 점의 y 좌표를 정의합니다.

rx 속성은 수평 반경(두 초점을 통과하는 선의 절반)

ry 속성은 수직 반경을 정의합니다

4, line

5, 다각형

6, 폴리라인<폴리라인>

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