JavaScript 線形グラデーション one_javascript スキル JavaScript 線形グラデーション by Situ Zhengmei svg by Situ Zhengmei svg by Situ Zhengmei svg by Situ Zhengmei JavaScript 線形グラデーション by Situ Zhengmei JavaScript 線形グラデーション by Situ Zhengmei

JavaScript の画像処理能力は実際には弱いわけではありませんが、ブラウザ戦争の影響で Adob​​e が Macromedia を買収したことで SVG が停滞しているのは残念です。

Apple は新しい勢力として、キャンバス タグを提供します。 Canvas は Mac OS のダッシュボードに初めて導入されましたApple が行った良い点はこれだけではありません。同社は SVG が煩雑すぎると考えたため、すべてのフィルター タグを SVG CSS 属性にしました (SVG には IE フィルターよりも多くのフィルターがあり、その機能はより包括的です)。 Firefox は何かが間違っていると判断すると、すぐに独自のプライベート プロパティのセットを作成しましたが、プレフィックスは -webkit- から -moz- に変更されました。 Opera の反応は比較的鈍かったと言わざるを得ません。Opera の CTO は CSS の発明者である Hakon Wium Lie であり、彼は他人が自分のことに何かをすることを好まないからです。したがって、線形グラデーションを実装するのは非常に困難です。IE では SVG を動的に作成する必要があり、Safari では -webkit を使用する必要があります。 -接頭辞付きの CSS プライベート プロパティ。opera は 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 ですべて選択 注: 外部 Js を導入する必要がある場合は、実行するために更新する必要があります]

次に、SVG 線形グラデーションの実装について話しましょう。関連する CSS プライベート プロパティはこれから派生します。 SVG のアップロードをサポートするスペースがないため、SVG を動的に生成することしかできません。私にとって最善のことは、動的に実装できることで、少なくともリクエストの数を減らし、大なり記号と小なり記号の記述を減らすことができることです。方法については、次のとおりです。 HTMLを追加して、Googleで検索してください。

linearGradient には、x1、x2、y1、y2 などのいくつかの属性があり、水平または垂直のグラデーションを実現するのに役立ちます。 x1、x2、y2、y2 は、カラー グラデーションの 2 点の座標と考えることができます。

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">
JavaScript 線形グラデーション (レベル) by Situ Zhengmei


<ストップ オフセット="20%" stop-color="rgb(255,255,0)" stop-opacity="1"/> 80% " stop-color="rgb(255,0,0)" stop-opacity="1"/>

[Ctrl A ですべて選択 注: 外部 Js を導入する必要がある場合は、実行するために更新する必要があります]

動的実装ですが、Firefox では誤起動しますFirefox も SVG Slow down で動作することがわかります。

コードをコピー

コードは次のとおりです。

🎜>< ;!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">
JavaScript 線形グラデーション(縦) by Situ Zhengmei





<ポリゴン ID = "s1" ポイント = "60,0 120,0 180, 60 180,120 120,180 60,180 0,120 0,60" fill="url(#gradient)"/>

[Ctrl A を押してすべて選択します 注: 外部 Js を導入する必要がある場合は、実行するために更新する必要があります]

コードをコピー
コードは次のとおりです:

JavaScript 線形グラデーション (角度) by Situ Zhengmei




;



< /svg>

[Ctrl A ですべて選択 注: 外部 Js を導入する必要がある場合は、実行するには更新する必要があります]

Firefox の CSS プライベート プロパティである -moz-linear-gradient について話しましょう。これは、background-image に属しますが、background とも省略されます。構文は次のとおりです:
-moz-linear-gradient( , [, ]* )
これら 2 つの点の値を設定して、それらが水平であるかどうかを判断できます。または、
/*horizo​​ntal*/
-moz-linear-gradient(left, right [, ]* )1 などの垂直方向。 -linear- gradient(top,bottom [, ]* )
以降の部分については、以下のランニングボックスを見るだけで十分です。ただし、効果を確認するには最新バージョンの Firefox (3.6a1) が必要です。

[Ctrl A ですべて選択 注: 外部 Js を導入する必要がある場合は、実行するために更新する必要があります]

次に、次を見てみましょう-webkit-gradient CSS プロパティ。使用法は -moz-linear-gradient と似ていますが、3 つの違いがあります。最初のパラメータは、線形グラデーションか放射状グラデーションかを決定するために使用されます。 2 点の値は左右上下でなければならず、どのように組み合わせても角度勾配を実現できません。第三に、カラーストップのオフセットは小数でなければなりません。

[Ctrl A を押してすべて選択 注: 外部 Js を導入する必要がある場合は、実行するために更新する必要があります]

結論、これが結果です複数のブラウザの共存について 調和のとれた状況を実現するには、IE が完全に独占することを望んでいます。次の部分は旅の始まりです。IE のフィルター障害の問題に対処するには、古代のアーティファクト テーブルを使用する必要があります。 SVG、上のトランスポート ボックスでわかるように、これらの特別なオブジェクトを作成するための小さなツールも作成しました...