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

HTML5でSVGロゴを描く方法は？

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

HTML5のSVGを使用して、円、長方形、線などの図形を簡単に描画できます。 SVGロゴを描画する例を見てみましょう。そのために、線形グラデーションを作成します：

HTML5でSVGロゴを描く方法は？

例

次のコードを実行してSVGロゴを描画してみてください-

<!DOCTYPE html>
<html>
   <head>
      <title>HTML5 SVG logo</title>
   </head>
   <body>
      <svg height="170" width="400">
         <defs>
            <linearGradient id="lgrad" x1="0%" y1="0%" x2="100%" y2="0%">
               <stop offset="0%"
               style="stop-color:rgb(184,78,43);stop-opacity:1" />
               <stop offset="50%"
               style="stop-color:rgb(241,241,241);stop-opacity:1" />
               <stop offset="100%"
               style="stop-color:rgb(255,141,52);stop-opacity:1" />
            </linearGradient>
         </defs>
         <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#lgrad)" />
         <text fill="#rgb(141,218,255)" font-size="40" font-family="Verdana"
            x="50" y="86">logo</text>
      </svg>
   </body>
</html>

出力

HTML5でSVGロゴを描く方法は？



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

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

  2. HTML5でstrokeText（）を使用してテキストを描画するにはどうすればよいですか？

    HTML5でキャンバスにテキストを描画するには、strokeText（）メソッドを使用します。これがstrokeText（）メソッドの構文です。指定された位置で指定されたテキストをストロークします。これは、指定されたx座標とy座標で示されます。デフォルトの色は黒です。 strokeText(text, x, y [, maxWidth ] ) こちらがstrokeText（）メソッドのパラメータ値です- S。いいえ パラメータ 説明 1 テキスト 書き込むテキスト 2 X ペイントが開始されるx座標 3