SVG(Scalable Vector Graphics) 이미지 추가, 가우시안 블러, 그라데이션 및 g 태그

오늘은 주로 SVG의 특수효과에 대해 이야기하겠습니다
사실 캔버스와 비슷하지만 XML 태그만 사용합니다
많이 사용하지는 않지만, 혹시라도 나중에 사용해야 한다면 정리하세요

사진 추가

svg에 사진을 추가할 수도 있습니다

<svg width=300 height=300>
    <image xlink:href="./images/d.jpg" x=100 y=100 height=100 width=100></image></svg>

이것은 HTML이 아닌 이미지 태그입니다.

xlink:href의 img 태그는 리소스 경로
x,y 이미지 좌표 위치
높이, 너비 너비 및 높이를 지정합니다. svg에 표시된 이미지

필터 프리미티브

svg는 다양한 필터를 제공합니다

• feBlend

• feColorMatrix

• feComponentTransfer

• feComposite

• feConvolveMatrix

• feDiffuseLighting

• feDisplacementMap

• feFlood

• feGaussianBlur

• feImage

• feMerge

• feMorphology

• feOffset

• feSpecularLighting

• feTile

• feTurbulence

• feDistantLight

• fePointLight

• feSpotLight

필터 태그를 사용하여 필터를 정의하세요. 필터에는 id 식별자
그래픽 요소는 filter = "url(#id)"을 통해 필터를 참조합니다.

필터를 사용하여 화려한 패턴 만들기
주로 feGaussianBlur Gaussian Blur 필터를 살펴보겠습니다

Gaussian Blur

feGaussianBlur는 흐림 효과를 만드는 데 사용됩니다
필터는 defs 요소에 정의됩니다

<svg width=100 height=100>
  <defs>
    <filter id="f1">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15">
    </filter>
  </defs>
  <rect width="100" height="100" stroke="blue" stroke-width="3"
  fill="red" filter="url(#f1)"></svg>

필터 ID 속성은 필터의 고유 이름을 정의합니다.
feGaussianBlur는 흐림 효과를 정의합니다
는 전체 이미지를 정의합니다. 효과 만들기
(SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint |
)
stdDeviation 흐림 정도 정의
요소를 연결하는 각형 요소의 필터 속성 "f1" 필터

Gradient

도 선형 그래디언트와 방사형 그래디언트
사용법은 캔버스 그라데이션과 유사합니다

선형 그라데이션

<svg widht=300 height=300>
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(0,0,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="150" cy="150" rx="100" ry="50" fill="url(#grad1)" /></svg>

linearGradient의 x1, y1, x2, y2는 그라데이션의 시작 및 끝 위치를 정의합니다
색상 방향은 정지 태그로 지정됩니다
XML 단일 태그에는 "/"가 있어야 합니다. 그렇지 않으면 레이블이 유효하지 않습니다. <stop></stop>

방사형 그라데이션

<svg width=300 height=300>
  <defs>
    <radialGradient id="grad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:white;stop-opacity:0" />
      <stop offset="100%" style="stop-color:orange;stop-opacity:1" />
    </radialGradient>
  </defs>
  <ellipse cx="150" cy="150" rx="100" ry="50" fill="url(#grad2)" /></svg>

radialGradient의 cx, cy 및 r은 가장 바깥쪽 원을 정의합니다.
fx 및 fy는 가장 안쪽 원을 정의합니다.
색상은 중지 태그로도 지정됩니다

g 태그

도구를 사용하면
내보낸 코드에서 볼 수 있습니다.
실제로 이것은 XML 태그에 마법 같은 것이 없습니다.
컨테이너에 대해 동일한 스타일을 지정할 수 있습니다. 그 안에 그래픽
예를 들어 색상, 좌표계, 필터 등이 있습니다.

<svg width=300 height=300 viewbox="0 0 30 30">
    <g stroke="red">
        <path d="M 5 10 L 25 10"></path>
        <path d="M 5 15 L 25 15"></path>
        <path d="M 5 20 L 25 20"></path>
    </g></svg>

마지막으로 svg 라이브러리 snap.svg
를 추천합니다. jQuery처럼 SVG를 조작하려면 DOM
snap.svg

위 내용은 SVG(scalable Vector Graphics) 입니다.) 이미지 추가, 가우시안 블러, 그래디언트, g 태그 내용은 PHP 중국어 홈페이지를 참고해주세요( www.php.cn) 관련 콘텐츠를 더 확인해보세요!