コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > H5 チュートリアル > 本文

HTML5 での SVG の使用方法 (コード例)

不言
リリース： 2019-01-11 09:30:02
転載
4788 人が閲覧しました

この記事の内容は HTML5 での SVG の使用方法 (コード例) です。必要な方は参考にしていただければ幸いです。

コードの最適化は常にプログラマの永遠のニーズであり、SVG 画像を合理的に使用して PNG/JPG やその他の形式の一部の画像を置き換えることは、フロントエンドの最適化の重要な部分です。最適化、まず SVG 画像の利点を見てみましょう:

  • SVG は多くのツール (メモ帳など) で読み取りおよび変更できます

  • #SVG は、JPEG や GIF 画像よりもサイズが小さく、圧縮率が高くなります。

    • #SVG はスケーラブルです

    • SVG 画像はどの解像度でも高品質で印刷できます

    • SVG は画質を損なうことなく拡大できます

    • SVG 画像内のテキストはオプションで検索可能です (地図の作成に最適です)

    • SVG は次のコマンドで実行できますJava テクノロジ

    • SVG はオープン スタンダードです

    • SVG ファイルは純粋な XML

    • いくつかSVG 画像の小さな例:

HTML5 での SVG の使用方法 (コード例)3 番目の共有アイコンのコードを見てみましょう: 

<svg>
  <g>
    <path></path>
    <path></path>
  </g>
</svg>
ログイン後にコピー
学生SVG を理解していません。初めて見たときと同じように、今では彼らの顔に疑問符が付いているはずです。心配しないでください。基本から始めましょう。

SVG とは何ですか?

SVG は、XML 構文に基づいた画像形式であり、正式名は Scalable Vector Graphics です。他の画像形式はピクセル処理をベースにしていますが、SVGは画像の形状を記述したものなので、本質的にはサイズが小さいテキストファイルであり、何度拡大しても歪みません。さらに、SVG は World Wide Web Consortium の標準であり、DOM や XSL などの W3C 標準と統合されています。 ＃＃＃＃＃＃＃＃＃使い方？

HTML5 では、上の小さな赤いハートなど、SVG 要素を HTML ページに直接埋め込むことができます。 

  <svg>
    <defs>
      <rect></rect>
      <mask>
        <use></use>
    </mask>
    </defs>
    <g>
      <use></use>
      <path></path>
    </g>
  </svg>
ログイン後にコピー

SVG コードは、.svg で終わるファイルに記述することもできます。ファイルを作成し、

<img alt="HTML5 での SVG の使用方法 (コード例)" >

、

、、

.logo {
  background: url(logo.svg);
}
ログイン後にコピー

SVG ファイルは BASE64 エンコードに変換して、データとして Web ページに書き込むこともできますURI。 

<img  alt="HTML5 での SVG の使用方法 (コード例)" >
ログイン後にコピー

SVG 構文

1. タグ

SVG コードを配置します。最上位タグ 内。以下に例を示します。 

<svg>
  <circle></circle>
</svg>
ログイン後にコピー
ログイン後にコピー
width 属性と height 属性は、HTML 要素内の SVG 画像が占める幅と高さを指定します。相対単位に加えて、絶対単位（単位：ピクセル）も使用できます。これら 2 つの属性が指定されていない場合、SVG 画像のデフォルトのサイズは 300 ピクセル (幅) x 150 ピクセル (高さ) です。

SVG 画像の一部のみを表示したい場合は、viewBox 属性を指定する必要があります。 

<svg>
  <circle></circle>
</svg>
ログイン後にコピー
ログイン後にコピー
属性の値には、左上隅の横座標と縦座標、ビューポートの幅と高さの 4 つの数値が含まれます。上記のコードでは、SVG 画像は幅 100 ピクセル x 高さ 100 ピクセルで、viewBox 属性はビューポートが点 (50, 50) から開始することを指定します。実際に表示されるのは、右下隅の 4 分の 1 の円です。

ビューポートは、それが配置されているスペースに収まる必要があることに注意してください。上記のコードでは、ビューポートのサイズは 50 x 50 です。SVG 画像のサイズは 100 x 100 であるため、ビューポートは SVG 画像のサイズに合わせて拡大され、つまり 4 倍に拡大されます。

width 属性と height 属性を指定せずに viewBox 属性のみを指定した場合、SVG 画像のアスペクト比のみを指定したことと同じになります。この場合、SVG 画像のデフォルトのサイズは、SVG 画像に含まれる HTML 要素のサイズと等しくなります。

2. タグ

タグは円を表します。 

<svg>
  <circle></circle>
  <circle></circle>
  <circle></circle>
</svg>
ログイン後にコピー

上記のコードは 3 つの円を定義します。 「circle」ラベルの cx、cy、r 属性はそれぞれ横座標、縦座標、半径であり、単位はピクセルです。座標は、canvas の左上隅の原点を基準としています。
class 属性は、対応する CSS クラスを指定するために使用されます。 

.red {
  fill: red;
}

.fancy {
  fill: none;
  stroke: black;
  stroke-width: 3pt;
}
ログイン後にコピー

SVG の CSS プロパティは Web 要素とは異なります。

fill：塗りつぶしの色

ストローク：ストロークの色

ストローク-幅：境界線の幅

3. タグ

< ;line>タグは直線を引くために使用します。 

<svg>
  <line></line>
</svg>
ログイン後にコピー

上記のコードでは、 タグの x1 属性と y1 属性は線分の開始点の横座標と縦座標を表し、x2 属性と y2 属性は横座標と縦座標を表します。線分の終点のスタイル 属性は線分のスタイルを表します。
4. タグ

タグはポリラインを描画するために使用されます。 

<svg>
  <polyline></polyline>
</svg>
ログイン後にコピー

の Points 属性は、各端点の座標を指定します。横座標と縦座標はカンマで区切られ、点はスペースで区切られます。

5. 标签
标签用于绘制矩形。

<svg>
  <rect></rect>
</svg>
ログイン後にコピー

的x属性和y属性，指定了矩形左上角端点的横坐标和纵坐标；width属性和height属性指定了矩形的宽度和高度（单位像素）。

6. 标签
标签用于绘制椭圆。

<svg>
  <ellipse></ellipse>
</svg>
ログイン後にコピー

的cx属性和cy属性，指定了椭圆中心的横坐标和纵坐标（单位像素）；rx属性和ry属性，指定了椭圆横向轴和纵向轴的半径（单位像素）。

7. 标签
标签用于绘制多边形。

<svg>
  <polygon></polygon>
</svg>
ログイン後にコピー

的points属性指定了每个端点的坐标，横坐标与纵坐标之间与逗号分隔，点与点之间用空格分隔。

8. 标签

标签用于制路径。

<svg>
<path></path>
</svg>
ログイン後にコピー

的d属性表示绘制顺序，它的值是一个长字符串，每个字母表示一个绘制动作，后面跟着坐标。

M：移动到（moveto）
L：画直线到（lineto）
Z：闭合路径

9. 标签

标签用于绘制文本。

<svg>
  <text>肆客足球</text>
</svg>
ログイン後にコピー

的x属性和y属性，表示文本区块基线（baseline）起点的横坐标和纵坐标。文字的样式可以用class或style属性指定。

10. 标签

标签用于复制一个形状。

<svg>
  <circle></circle>

  <use></use>
  <use></use>
</svg>
ログイン後にコピー

的href属性指定所要复制的节点，x属性和y属性是左上角的坐标。另外，还可以指定width和height坐标。

11. 标签

标签用于将多个形状组成一个组（group），方便复用。

<svg>
  <g>
    <text>圆形</text>
    <circle></circle>
  </g>

  <use></use>
  <use></use>
</svg>
ログイン後にコピー

12. 标签

标签用于自定义形状，它内部的代码不会显示，仅供引用。

<svg>
  <defs>
    <g>
      <text>圆形</text>
      <circle></circle>
    </g>
  </defs>

  <use></use>
  <use></use>
  <use></use>
</svg>
ログイン後にコピー

13. 标签
标签用于自定义一个形状，该形状可以被引用来平铺一个区域。

<svg>
  <defs>
    <pattern>
      <circle></circle>
    </pattern>
  </defs>
  <rect></rect>
</svg>
ログイン後にコピー

上面代码中，标签将一个圆形定义为dots模式。patternUnits="userSpaceOnUse"表示的宽度和长度是实际的像素值。然后，指定这个模式去填充下面的矩形。

14. 标签
标签用于插入图片文件。

<svg>
  <image></image>
</svg>
ログイン後にコピー

上面代码中，的xlink:href属性表示图像的来源。

15. 标签
标签用于产生动画效果。

<svg>
  <rect>
    <animate></animate>
  </rect>
</svg>
ログイン後にコピー

上面代码中，矩形会不断移动，产生动画效果。

的属性含义如下。

attributeName：发生动画效果的属性名。
from：单次动画的初始值。
to：单次动画的结束值。
dur：单次动画的持续时间。
repeatCount：动画的循环模式。
可以在多个属性上面定义动画。

<animate></animate>
<animate></animate>
ログイン後にコピー

16. 标签
标签对 CSS 的transform属性不起作用，如果需要变形，就要使用标签。

<svg>
  <rect>
    <animatetransform></animatetransform>
  </rect>
</svg>
ログイン後にコピー

上面代码中，的效果为旋转（rotate），这时from和to属性值有三个数字，第一个数字是角度值，第二个值和第三个值是旋转中心的坐标。from="0 200 200"表示开始时，角度为0，围绕(200, 200)开始旋转；to="360 400 400"表示结束时，角度为360，围绕(400, 400)旋转。

JavaScript 操作SVG

1. DOM操作
如果 SVG 代码直接写在 HTML 网页之中，它就成为网页 DOM 的一部分，可以直接用 DOM 操作。

<svg>
  <circle></circle>
<svg></svg></svg>
ログイン後にコピー

上面代码插入网页之后，就可以用 CSS 定制样式。

circle {
  stroke-width: 5;
  stroke: #f00;
  fill: #ff0;
}

circle:hover {
  stroke: #090;
  fill: #f8f8f8;
}
ログイン後にコピー

然后，可以用 JavaScript 代码操作 SVG。

var mycircle = document.getElementById('mycircle');

mycircle.addEventListener('click', function(e) {
  console.log('circle clicked - enlarging');
  mycircle.setAttribute('r', 60);
}, false);
ログイン後にコピー

上面代码指定，如果点击图形，就改写circle元素的r属性。

2. 获取 SVG DOM
使用<object></object>、<iframe></iframe>、<embed></embed>标签插入 SVG 文件，可以获取 SVG DOM。

var svgObject = document.getElementById('object').contentDocument;
var svgIframe = document.getElementById('iframe').contentDocument;
var svgEmbed = document.getElementById('embed').getSVGDocument();
ログイン後にコピー

注意，如果使用<img alt="HTML5 での SVG の使用方法 (コード例)" >标签插入 SVG 文件，就无法获取 SVG DOM。

3. 读取 SVG 源码
由于 SVG 文件就是一段 XML 文本，因此可以通过读取 XML 代码的方式，读取 SVG 源码。

<p>
  <svg>
    <!-- svg code -->
  </svg>
</p>
ログイン後にコピー

使用XMLSerializer实例的serializeToString()方法，获取 SVG 元素的代码。

var svgString = new XMLSerializer()
  .serializeToString(document.querySelector('svg'));
ログイン後にコピー

4. SVG 图像转为 Canvas 图像
首先，需要新建一个Image对象，将 SVG 图像指定到该Image对象的src属性。

var img = new Image();
var svg = new Blob([svgString], {type: "image/svg+xml;charset=utf-8"});

var DOMURL = self.URL || self.webkitURL || self;
var url = DOMURL.createObjectURL(svg);

img.src = url;
ログイン後にコピー

然后，当图像加载完成后，再将它绘制到<canvas></canvas>元素。

img.onload = function () {
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0);
};
ログイン後にコピー

小结

SVG能做的远不止这些，利用SVG做的动画效果，文字效果我们以后给大家详细讲解，今天就先到这里吧。


以上がHTML5 での SVG の使用方法 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
chrome html5 javascript react.js
ソース：segmentfault.com
前の記事：エクスポートと module.expors の違いと関係は何ですか? 次の記事：モバイルページの先頭の固定位置の絶対位置実装（コード例）
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
Live Server を使用する Web サイトをファイルから起動すると機能しません いくつかのブラウザを試してみましたが、いずれの場合も Web サイトは LiveServer で正常に動作しました。一方、Firefox/Chrome を使用してサイトを起動すると...
から 2024-04-06 12:46:18
0
1
403
表のタイトルを垂直方向に回転、中央 + 下揃え、クロスブラウザー ヘッダーが回転されたテーブルがありますが、これは Chrome では期待どおりに表示されますが、Firefox では期待どおりに表示されません。 Chromev108 (垂直下、水...
から 2024-04-04 16:45:25
0
1
330
JS を使用して再生品質を制御する Javascript を使用してビデオの再生品質を制御する方法はありますか?より正確に言うと、JavaScriptを使用してビデオの品質を選択したいと考えています。 Chrome ...
から 2024-04-04 00:21:55
0
1
384
Chrome での HTML Web ページのページネーション フルページの div コンテナの後にページネーションしようとしています。紹介ページを読み込むのと同じように、下にスクロールすると、一種のナビゲーション センターに入ることができます...
から 2024-04-02 23:26:08
0
1
404
Chrome でローカルに保存された HTML ファイルを参照しようとすると問題が発生する 問題が発生しました。簡単に言えば、大量の HTML 関連ファイルがあり、それらを Android デバイス上でローカルに実行したいと考えています。たとえば、index.html フ...
から 2024-04-02 21:43:02
0
1
373
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート