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

집

웹 프론트엔드

H5 튜토리얼

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

不言

Aug 08, 2018 am 11:10 AM

html

이 글의 내용은 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

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

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

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

자바 튜토리얼

1659

Cakephp 튜토리얼

1415

라라벨 튜토리얼

1309

PHP 튜토리얼

1257

C# 튜토리얼

1232

Related knowledge

HTML의 테이블 테두리 Sep 04, 2024 pm 04:49 PM

HTML의 테이블 테두리 안내. 여기에서는 HTML의 테이블 테두리 예제를 사용하여 테이블 테두리를 정의하는 여러 가지 방법을 논의합니다.

HTML의 중첩 테이블 Sep 04, 2024 pm 04:49 PM

HTML의 Nested Table에 대한 안내입니다. 여기에서는 각 예와 함께 테이블 내에 테이블을 만드는 방법을 설명합니다.

HTML 여백-왼쪽 Sep 04, 2024 pm 04:48 PM

HTML 여백-왼쪽 안내. 여기에서는 HTML margin-left에 대한 간략한 개요와 코드 구현과 함께 예제를 논의합니다.

HTML 테이블 레이아웃 Sep 04, 2024 pm 04:54 PM

HTML 테이블 레이아웃 안내. 여기에서는 HTML 테이블 레이아웃의 값에 대해 예제 및 출력 n 세부 사항과 함께 논의합니다.

HTML 입력 자리 표시자 Sep 04, 2024 pm 04:54 PM

HTML 입력 자리 표시자 안내. 여기서는 코드 및 출력과 함께 HTML 입력 자리 표시자의 예를 논의합니다.

PHP에서 HTML/XML을 어떻게 구문 분석하고 처리합니까? Feb 07, 2025 am 11:57 AM

이 튜토리얼은 PHP를 사용하여 XML 문서를 효율적으로 처리하는 방법을 보여줍니다. XML (Extensible Markup Language)은 인간의 가독성과 기계 구문 분석을 위해 설계된 다목적 텍스트 기반 마크 업 언어입니다. 일반적으로 데이터 저장 AN에 사용됩니다