오늘은 주로 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 필터를 살펴보겠습니다
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 |
< filter-primitive-reference >)
stdDeviation 흐림 정도 정의
요소를 연결하는 각형 요소의 필터 속성 "f1" 필터
도 선형 그래디언트와 방사형 그래디언트
사용법은 캔버스 그라데이션과 유사합니다
<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 />
<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는 가장 안쪽 원을 정의합니다.
색상은 중지 태그로도 지정됩니다
도구를 사용하면
내보낸 코드에서 볼 수 있습니다.
실제로 이것은 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) 관련 콘텐츠를 더 확인해보세요!