javascript 선형 그라디언트 one_javascript 기술 Situ Zhengmei의 javascript 선형 그라디언트 Situ Zhengmei의 svg Situ Zhengmei의 svg Situ Zhengmei의 svg Situ Zhengmei의 javascript 선형 그라디언트 Situ Zhengmei의 javascript 선형 그라디언트
- PHP中文网원래의
- 2016-05-16 18:44:28985검색
자바스크립트의 이미지 처리 능력은 사실 약한 편은 아니지만, 브라우저 전쟁으로 인해 영향을 받은 것은 아쉽습니다. 말할 것도 없이 Adobe의 Macromedia 인수로 인해 SVG가 침체 상태에 빠졌습니다.
Apple은 새로운 세력으로 캔버스 태그를 선보입니다. Canvas는 Mac OS의 Dashboard에서 처음 소개되었습니다. Apple이 한 좋은 일은 이것뿐만이 아닙니다. SVG가 너무 번거롭다고 판단하여 모든 필터 태그를 SVG CSS 속성으로 만들었습니다(SVG는 IE 필터보다 더 많은 필터를 갖고 있으며 그 기능은 더 포괄적입니다). Firefox는 뭔가 잘못된 것을 발견했을 때 신속하게 자체 개인 속성 세트를 만들었지만 접두어는 -webkit-에서 -moz-로 변경되었습니다. Opera의 반응은 상대적으로 느렸습니다. Opera의 CTO는 CSS의 창시자인 Hakon Wium Lie이고 그는 다른 사람이 자기 일을 하는 것을 좋아하지 않기 때문입니다. 따라서 선형 그래디언트를 구현하는 것은 매우 어렵습니다. IE는 IE 필터를 사용해야 하며 Firefox는 SVG를 동적으로 생성하는 데 몇 가지 문제가 있습니다. Safari와 Chrome은 -webkit을 사용해야 합니다. -접두사가 붙은 CSS 개인 속성, 오페라는 SVG를 사용해야 합니다. 이제 하나씩 파헤쳐 보겠습니다.
IE는 DXImageTransform.Microsoft.Gradient 필터를 사용해야 합니다(마지막 Gradient의 첫 글자가 대문자인지 소문자인지는 중요하지 않습니다).
| 属性 | 说明 |
|---|---|
| enabled | 是否启用滤镜，默认为true |
| gradientType | 是垂直渐变还是水平渐变，默认是0(垂直渐变)，1为水平渐变 |
| startColorStr | 起始颜色，能接受一个8位hex颜色值，从#FF000000到#FFFFFFFF，默认是蓝色#FF0000F；或者使用red,green等颜色值F |
| endColorStr | 结束颜色，能接受一个8位hex颜色值，从#FF000000到#FFFFFFFF，默认是黑色#FF000000 |
| startColor | 作用同startColorStr，接受一个0到4294967295整体颜色值，没有默认值 |
| endColor | 作用同endColorStr，接受一个0到4294967295整体颜色值，没有默认值 |
[모두 선택하려면 Ctrl A 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.]
그런 다음 SVG 선형 그래디언트 구현에 대해 이야기하겠습니다. 관련 CSS 개인 속성은 여기에서 파생됩니다. SVG 업로드를 지원할 공간이 없기 때문에 동적으로 SVG를 생성만 할 수 있습니다. 나에게 가장 좋은 점은 동적으로 구현할 수 있다는 것입니다. 최소한 요청 수를 줄이고 보다 큼 기호와 보다 작음 기호를 더 적게 작성할 수 있습니다. 다음은 정적 구현 방법입니다. HTML을 추가하고 Google에서 검색해 보세요.
linearGradient에는 x1, x2, y1, y2 등과 같은 여러 속성이 있어 수평 또는 수직 그라데이션을 달성하는 데 도움이 됩니다. x1, x2, y2, y2를 색상 그라데이션의 두 점 좌표로 생각할 수 있습니다.
y1이 y2와 같고 x1이 x2와 같지 않으면 수평 그라데이션이 달성됩니다.
x1이 x2와 같고 y1이 y2와 같지 않으면 수직 그라데이션이 달성됩니다.
y1이 y2와 같지 않고 x1이 x2와 같지 않으면 각도 그라데이션이 달성됩니다.
코드 복사 코드는 다음과 같습니다.
🎜>< ;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
xmlns="http://www.w3.org/2000/svg">
[모두 선택하려면 Ctrl A 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.]
동적 구현이지만 Firefox에서는 제대로 실행되지 않습니다. . Firefox도 SVG에서 작동하는 것을 볼 수 있습니다.
코드 복사 코드는 다음과 같습니다.
🎜>< ;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> xmlns="http://www.w3.org/2000/svg">
<폴리곤 id = "s1" 포인트 = "60,0 120,0 180, 60 180,120 120,180 60,180 0,120 0,60" fill="url(#gradient)"/>
[모두 선택하려면 Ctrl A 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.]
코드 복사
xmlns=" http://www.w3.org/2000 /svg" version="1.1">
[모두 선택하려면 Ctrl A 참고: 외부 J를 도입해야 하는 경우, 실행하려면 새로고침해야 합니다.]
Firefox의 CSS 전용 속성인 -moz-linear-gradient에 대해 이야기해 보겠습니다. 이는 background-image에 속하지만 줄여서 background라고도 합니다. 구문은 다음과 같습니다.
-moz-linear-gradient(
이 두 점의 값을 설정하여 수평인지 여부를 확인할 수 있습니다. 또는 수직(예:
/*horizontal*/
-moz-linear-gradient(left, right [,
/*vertical*/
-moz -linear-gradient(top, Bottom [,
다음 부분은 아래 런닝박스만 봐도 충분합니다. 그러나 효과를 보려면 최신 버전의 Firefox(3.6a1)가 필요합니다.
[모두 선택하려면 Ctrl A 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.]
그럼 살펴보겠습니다. -webkit-gradient CSS 속성 사용법은 -moz-linear-gradient와 유사하지만 세 가지 차이점이 있습니다. 첫 번째 매개변수는 선형 그래디언트인지 방사형 그래디언트인지 결정하는 데 사용됩니다. 두 포인트 값은 왼쪽, 오른쪽, 위쪽, 아래쪽이어야 하며 어떻게 결합해도 각도 그라데이션을 얻을 수 없습니다. 셋째, 색상 정지 오프셋은 소수여야 합니다.
[모두 선택하려면 Ctrl A 참고: 외부 J를 도입해야 하는 경우 새로 고침해야 실행됩니다.]
결론은 이렇습니다. 여러 브라우저의 공존 조화로운 상황을 위해서는 IE가 완전한 독점을 달성하는 것이 좋습니다. 다음 부분은 여정의 시작입니다. IE의 필터 오류 문제를 처리하려면 고대 아티팩트 테이블을 사용해야 합니다. SVG, 위의 전송 상자에서 볼 수 있듯이 이러한 특별한 개체를 만들기 위한 작은 도구도 만들었습니다...