SVG-ストローク

SVGは複数のストロークプロパティをサポートしています。

以下は、使用される主なストロークプロパティです。

Sr.No.	Stroke Type & Description
1	stroke − defines color of text, line or outline of any element.
2	stroke-width − defines thickness of text, line or outline of any element.
3	stroke-linecap − defines different types of ending of a line or outline of any path.
4	stroke-dasharray − used to create dashed lines.

例

テストVG

<html>
   <title>SVG Stroke</title>
   <body>

      <h1>Sample SVG Stroke</h1>

      <svg width="800" height="800">
         <g>
            <text x="30" y="30" >Using stroke: </text>
            <path stroke="red" d="M 50 50 L 300 50"/>
            <path stroke="green" d="M 50 70 L 300 70"/>
            <path stroke="blue" d="M 50 90 L 300 90"/>
         </g>
      </svg>

   </body>
</html>

出力

ChromeウェブブラウザでテキストSVGを開きます。 Chrome/Firefox/Operaを使用して、プラグインなしでSVG画像を直接表示できます。 Internet Explorer 9以降もSVG画像レンダリングをサポートしています。

ストローク幅

<html>
   <title>SVG Stroke</title>
   <body>

      <h1>Sample SVG Stroke</h1>

      <svg width="800" height="800">
         <text x="30" y="10" >Using stroke-width: </text>
         <path stroke-width="2" stroke="black" d="M 50 50 L 300 50"/>
         <path stroke-width="4" stroke="black" d="M 50 70 L 300 70"/>
         <path stroke-width="6" stroke="black" d="M 50 90 L 300 90"/>
      </svg>

   </body>
</html>

出力

ChromeウェブブラウザでテキストSVGを開きます。 Chrome/Firefox/Operaを使用して、プラグインなしでSVG画像を直接表示できます。 Internet Explorer 9以降もSVG画像レンダリングをサポートしています。

ストロークラインキャップ

<html>
   <title>SVG Stroke</title>
   <body>

      <h1>Sample SVG Stroke</h1>

      <svg width="800" height="800">
         <g>
            <text x="30" y="30" >Using stroke-linecap: </text>

            <path stroke-linecap="butt" stroke-width="6"
            stroke="black" d="M 50 50 L 300 50"/>

            <path stroke-linecap="round" stroke-width="6"
            stroke="black" d="M 50 70 L 300 70"/>

            <path stroke-linecap="square" stroke-width="6"
            stroke="black" d="M 50 90 L 300 90"/>
         </g>
      </svg>

   </body>
</html>

出力

ChromeウェブブラウザでテキストSVGを開きます。 Chrome/Firefox/Operaを使用して、プラグインなしでSVG画像を直接表示できます。 Internet Explorer 9以降もSVG画像レンダリングをサポートしています。

ストロークダッシュアレイ

<html>
   <title>SVG Stroke</title>
   <body>

      <h1>Sample SVG Stroke</h1>

      <svg width="800" height="800">
         <g>
            <text x="30" y="30" >Using stroke-dasharray: </text>

            <path stroke-dasharray="5,5" stroke-width="6"
            stroke="black" d="M 50 50 L 300 50"/>

            <path stroke-dasharray="10,10" stroke-width="6"
            stroke="black" d="M 50 70 L 300 70"/>

            <path stroke-dasharray="20,10,5,5,5,10" stroke-width="6"
            stroke="black" d="M 50 90 L 300 90"/>
         </g>
      </svg>

   </body>
</html>

出力

ChromeウェブブラウザでテキストSVGを開きます。 Chrome/Firefox/Operaを使用して、プラグインなしでSVG画像を直接表示できます。 Internet Explorer 9以降もSVG画像レンダリングをサポートしています。

Svg-stroke

SVG-ストローク

例

出力

ストローク幅

出力

ストロークラインキャップ

出力

ストロークダッシュアレイ

出力

目次