SVG基础|SVG图形填充颜色
SVG的填充是指在图形的描边内部填充指定的颜色。通过fill SVG CSS属性,我们可以为任何SVG图形填充颜色。
填充颜色示例
SVG的填充颜色是将颜色填充到SVG图形描边的里面。下面是一个例子:
<circle cx="50" cy="50" r="25" style="stroke: none; fill: #0000ff;" />
这个例子定义了一个填充色为蓝色的圆形,它没有描边。得到的结果如下:
填充和描边
你可以结合使用SVG的填充和描边,下面是一个例子:
<circle cx="50" cy="50" r="25" style="stroke: #000066; fill: #3333ff;" />
这个例子定义了一个描边色为深蓝色,填充色为浅蓝色的圆形。得到的结果如下:
填充色的透明度
SVG fill-opacity CSS属性用于设置SVG图形的填充色透明度。fill-opacity属性的取值在0-1之间,越接近0越透明,越接近1越不透明。默认的fill-opacity值为1,即完全不透明。
下面是一个使用fill-opacity属性的例子:
<circle cx="50" cy="50" r="25" style="stroke: none; fill: #0000ff; fill-opacity: 0.3; " /> <circle cx="120" cy="50" r="25" style="stroke: none; fill: #0000ff; fill-opacity: 0.7; " />
上面的代码的返回结果是:
上面的文字是在两个圆形的下面,因为圆形是半透明的,所以文字都可以被看见。
填充规则
SVG fill-rule属性用于决定复杂的图形如何进行填充。fill-rule属性有两个可选值:
nonzero
evenodd
这两个值通常用于决定哪些部分是在图像的内部,哪些部分是在图形的外部。只有在图像内部的部分才会被填充。如果是一个圆形就非常简单,但是大多数图像并非如此简单,来看下面的例子:
<path d="M50,20 l40,40 l-40,40 l-40,-40 l40,-40 M50,40 l20,20 l-20,20 l-20,-20 l20,-20" style="stroke: #000000; fill: #6666ff; fill-rule: nonzero; " /> <path d="M150,20 l40,40 l-40,40 l-40,-40 l40,-40 M150,40 l-20,20 l20,20 l20,-20 l-20,-20" style="stroke: #000000; fill: #6666ff; fill-rule: nonzero;" />
这里有两条路径分别包含8条直线,绘制成一个方块形状,在大方块里面是一个小方块。在第一条路径中,内部的方块从左向右(顺时针)绘制,在第二条路径中,内部的方块从右向左(逆时针)绘制。下面是当fill-rule属性设置为nonzero时的返回结果。
如上图所示,nonzero规则是根据内部方块的绘制方向来决定它是否在外部方块的内部。nonzero规则决定一个点是否在图形的内部或外部的原则如下:
从这个点向任何方向画一条射线,每次图形中的一条路径穿过这条射线,如果路径是从左向右穿过射线的计数加1,如果是从右向左穿过的计数减1。在计算所有穿过射线的路径之后,如果总数是0,那么这个点会被认为在路径之外。如果总数不是0,那么这个点会被认为是在路径之内。
下面的例子使用的是fill-rule为evenodd规则的例子:
<path d="M50,20 l40,40 l-40,40 l-40,-40 l40,-40 M50,40 l20,20 l-20,20 l-20,-20 l20,-20" style="stroke: #000000; fill: #6666ff; fill-rule: evenodd;" /> <path d="M150,20 l-40,40 l40,40 l40,-40 l-40,-40 M150,40 l-20,20 l20,20 l20,-20 l-20,-20" style="stroke: #000000; fill: #6666ff; fill-rule: evenodd;" />
-
下面是返回结果:

evenodd规则决定一个点是否在图形内的原则是:
从这个点向任何方向画一条射线,每一次图形中的路径穿过这条射线,计数加1。如果总数是偶数,内这个点在图形之外。如果总数是奇数,那么这个点在图形之内。
以上就是SVG基础|SVG图形填充颜色的内容,更多相关内容请关注PHP中文网(www.php.cn)!

ホット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
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック









H5プロジェクトを実行するには、次の手順が必要です。Webサーバー、node.js、開発ツールなどの必要なツールのインストール。開発環境の構築、プロジェクトフォルダーの作成、プロジェクトの初期化、コードの書き込み。開発サーバーを起動し、コマンドラインを使用してコマンドを実行します。ブラウザでプロジェクトをプレビューし、開発サーバーURLを入力します。プロジェクトの公開、コードの最適化、プロジェクトの展開、Webサーバーの構成のセットアップ。

H5ページの制作とは、HTML5、CSS3、JavaScriptなどのテクノロジーを使用したクロスプラットフォーム互換のWebページの作成を指します。そのコアは、ブラウザの解析コード、レンダリング構造、スタイル、インタラクティブ機能にあります。一般的なテクノロジーには、アニメーションエフェクト、レスポンシブデザイン、およびデータ相互作用が含まれます。エラーを回避するには、開発者をデバッグする必要があります。パフォーマンスの最適化とベストプラクティスには、画像形式の最適化、リクエスト削減、コード仕様などが含まれ、読み込み速度とコード品質を向上させます。

H5クリックアイコンを作成する手順には、次のものがあります。画像編集ソフトウェアで正方形のソース画像の準備が含まれます。 H5エディターにインタラクティブ性を追加し、クリックイベントを設定します。アイコン全体をカバーするホットスポットを作成します。ページにジャンプしたり、アニメーションのトリガーなど、クリックイベントのアクションを設定します。 HTML、CSS、およびJavaScriptファイルとしてH5ドキュメントをエクスポートします。エクスポートされたファイルをウェブサイトまたは他のプラットフォームに展開します。

H5はスタンドアロンプログラミング言語ではなく、最新のWebアプリケーションを構築するためのHTML5、CSS3、およびJavaScriptのコレクションです。 1。HTML5は、Webページの構造とコンテンツを定義し、新しいタグとAPIを提供します。 2。CSS3はスタイルとレイアウトを制御し、アニメーションなどの新しい機能を紹介します。 3. JavaScriptは動的な相互作用を実装し、DOM操作と非同期要求を通じて機能を強化します。

はい、H5ページの生産は、HTML、CSS、JavaScriptなどのコアテクノロジーを含むフロントエンド開発のための重要な実装方法です。開発者は、&lt; canvas&gt;の使用など、これらのテクノロジーを巧みに組み合わせることにより、動的で強力なH5ページを構築します。グラフィックを描画するタグまたはJavaScriptを使用して相互作用の動作を制御します。

H5(HTML5)は、マーケティングキャンペーンページ、製品ディスプレイページ、企業プロモーションマイクロウェブサイトなどの軽量アプリケーションに適しています。その利点は、クロスプラットフォームと豊富な対話性にありますが、その制限は複雑な相互作用とアニメーション、ローカルリソースアクセス、オフライン機能にあります。

H5ポップアップウィンドウの作成手順:1。トリガー方法(クリック、時間、終了、スクロール)を決定します。 2。設計コンテンツ(タイトル、テキスト、アクションボタン); 3。SETスタイル(サイズ、色、フォント、背景); 4.コードを実装する(HTML、CSS、JavaScript); 5。テストと展開。

H5ReferStoHtml5、apivotaltechnologyinwebdevelopment.1)html5introduceSnewelementsandapisforrich、dynamicwebapplications.2)Itupp ortsmultimediawithoutplugins、endancingurexperiencecrossdevices.3)semanticelementsimprovecontentstructurendseo.4)H5'srespo
