3テラバイト

プログラム関連備忘録サイト。主にゲーム。

HTML

HTML – svgタグで図形を描画する

投稿日:

サンプルコード

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <svg width="100" height="100" viewBox="0 0 100 100">
      <circle cx="50" cy="50" r="50" fill="red"></circle>
    </svg>
    <svg width="200" height="100" viewBox="0 0 200 100">
      <ellipse cx="100" cy="50" rx="100" ry="50" fill="blue"></ellipse>
    </svg>
    <svg width="200" height="100" viewBox="0 0 200 100">
      <rect x="0" y="0" width="200" height="100" rx="0" ry="0" fill="yellow"></rect>
    </svg>
    <svg width="100" height="100" viewBox="0 0 100 100">
      <polygon points="50,0 100,50 75,100 25,100 0,50" fill="green"></polygon>
    </svg>
    <svg width="100" height="100" viewBox="0 0 100 100">
      <line x1="0" y1="50" x2="100" y2="50" stroke="#000"></line>
    </svg>
    <svg width="100" height="100" viewBox="0 0 100 100">
      <polyline points="0,25 50,25 50,75 100,75" stroke="#000" fill="none"></polyline>
    </svg>
  </body>
</html>

<svg width="100" height="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="50" fill="red"></circle>
</svg>
プロパティ説明
cx円の中心のX座標
cy円の中心のY座標
r円の半径
fill円の塗りつぶし色

楕円

<svg width="200" height="100" viewBox="0 0 200 100">
  <ellipse cx="100" cy="50" rx="100" ry="50" fill="blue"></ellipse>
</svg>

四角形

<svg width="200" height="100" viewBox="0 0 200 100">
  <rect x="0" y="0" width="200" height="100" rx="0" ry="0" fill="yellow"></rect>
</svg>

多角形

<svg width="100" height="100" viewBox="0 0 100 100">
  <polygon points="50,0 100,50 75,100 25,100 0,50" fill="green"></polygon>
</svg>

直線

<svg width="100" height="100" viewBox="0 0 100 100">
  <line x1="0" y1="50" x2="100" y2="50" stroke="#000"></line>
</svg>

折れ線

<svg width="100" height="100" viewBox="0 0 100 100">
  <polyline points="0,25 50,25 50,75 100,75" stroke="#000" fill="none"></polyline>
</svg>

-HTML


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

D3.jsベースのJavaScriptチャートライブラリC3.jsの使い方

公式サイト https://c3js.org/ サンプルコード Getting Startedページのサンプルを動かしてみます。https://c3js.org/gettingstarted.html …

no image

画像のExif情報を読み込むJavaScriptライブラリExif.jsの使い方

Exif.jshttps://github.com/exif-js/exif-js 使い方 ここではローカルサーバーに配置したHTMLファイルから使用します。fileプロトコルでアクセスしている場合は …

no image

動画を埋め込むHTML要素<video>の使い方

動画を埋め込む 以下のようにsrc属性に埋め込みたい動画のURLを指定することで動画を埋め込むことができます。 <video src="movie.mp4"></ …

no image

チャートを簡単に追加できるJavaScriptライブラリChart.jsの使い方

折れ線グラフ、棒グラフ、レーダーチャート、ドーナツチャート、円グラフ、ポーラチャート、バブルチャート、散布図等のチャートをWebサイトに簡単に追加することができます。 公式サイト https://ww …

no image

JavaScriptで配列やオブジェクトの一部を代入する分割代入

JavaScriptで変数に配列やオブジェクトから値を代入する際に、左辺の変数名に角括弧[]を付けることで配列やオブジェクトの一部のみ代入することが可能です。 以下の例では変数aに右辺の配列の内最初の …