SVG 教程：笔画属性和示例

terry 2年前 (2023-09-27) 阅读数 64 #数据结构与算法

SVG 支持多种笔画属性 ( 笔画)。

这里有一些常用的属性行程。

编号	描边类型	描述
1	`描边`	定义元素的文本、线条或轮廓的颜色。
2	`笔划宽度`	定义任何元素的文本、线条或轮廓的粗细。
3	`行程线帽`	定义任何路径的不同类型的结束线或轮廓。
4	`Stroke-dasharray`	用于创建虚线。

示例

文件：testSVG.html -

<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>

HTML

在 Chrome 网络浏览器中，您应该会看到 ' html 以下结果 -

中风宽度属性 Chrome Web浏览器中的HTML

打开 -testsv.html，您应该看到以下结果-Chrome Web浏览器中的❙❙HTML网络openthytestsvg.html。您应该看到以下结果 -

Stroke-Dasharray Properties

<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>