HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML5 SVGで円を描く方法は？

SVGはScalableVectorGraphicsの略で、2DグラフィックスとグラフィカルアプリケーションをXMLで記述するための言語であり、XMLはSVGビューアによってレンダリングされます。ほとんどのWebブラウザーは、PNG、GIF、およびJPGを表示できるのと同じようにSVGを表示できます。

HTML SVGで円を描くには、SVGの要素を使用します。

HTML5 SVGで円を描く方法は？

例

次のコードを実行して、HTML5SVGで円を描く方法を学ぶことができます。

<!DOCTYPE html>
<html>
   <head>
      <style>
         #svgelem {
            position: relative;
            left: 10%;
            -webkit-transform: translateX(-20%);
            -ms-transform: translateX(-20%);
            transform: translateX(-20%);
         }
      </style>

      <title>HTML5 SVG Circle</title>
   </head>

   <body>
      <h2>HTML5 SVG Circle</h2>
      <svg id="svgelem" height="200" xmlns="https://www.w3.org/2000/svg">
         <circle id="greencircle" cx="60" cy="60" r="50" fill="green" />
      </svg>
   </body>
</html>

出力

HTML5 SVGで円を描く方法は？


  1. HTML5でSVG画像を使用する方法は？

    HTML5でSVG画像を使用するには、要素またはを使用します。 SVGファイルを追加するには、HTMLでまたは要素を使用できます。要件に応じていずれかを選択してください。 SVG画像を追加する方法は次のとおりです。 SVGがファイルとして保存されている場合は、SVGイメージとして直接使用できます： 例 次のコードを実行して、SVG画像を使用することができます <!DOCTYPE html> <html>    <head>       <style>     &nb

  2. HTML5でarc（）を使用して円を描く方法は？

    arc（）メソッドは、canvas要素を使用してHTML5で円を作成するために使用されます。 arc（）メソッドを使用する円の場合、開始角度を0に、終了角度を2*Math.PIに使用します。 これがarc（）メソッドのパラメータ値です- S。いいえ パラメータ 説明 1 x x座標 2 y y座標 3 r 円の半径 4 startingAngle ラジアン単位の開始角度 5 endingAngle ラジアン単位の終了角度 6 反時計回り（True / False）