Latest web development tutorials

Propiedades de trazo SVG

Propiedades de trazo SVG

SVG ofrece una amplia gama de atributos de trazo. En este capítulo, vamos a ver lo siguiente:

  • golpe
  • accidente cerebrovascular de ancho
  • accidente cerebrovascular-linecap
  • accidente cerebrovascular-dasharray

Todos los atributos de trazo se pueden aplicar a cualquier tipo de líneas, el texto y elementos como un contorno circular.


propiedad de trazo SVG

atributo de trazo define una línea o el color de texto del elemento de esquema:

Aquí está el código SVG:

Ejemplos

<Xmlns = Svg "http://www.w3.org/2000/svg" version = "1.1">
<G llenar = "none">
<Ruta de carrera = "red" d = "M5 20 l215 0" />
<Ruta de carrera = "blue" d = "M5 40 l215 0" />
<Ruta de carrera = "negro" d = "M5 60 l215 0" />
</ G>
</ Svg>

Trate »

Para los usuarios de Opera: vista de archivos SVG (haz clic derecho en los gráficos SVG fuente de vista previa).


accidente cerebrovascular ancho de atributo SVG

Tstroke- atributos definen una línea de anchura o el espesor de texto elemento de contorno:

Aquí está el código SVG:

Ejemplos

<Xmlns = Svg "http://www.w3.org/2000/svg" version = "1.1">
<G relleno = "none" golpe = "negro">
<Ruta accidente cerebrovascular-width = "2" d = "M5 20 l215 0" />
<Ruta accidente cerebrovascular-width = "4" d = "M5 40 l215 0" />
<Ruta accidente cerebrovascular-width = "6" d = "M5 60 l215 0" />
</ G>
</ Svg>

Trate »

Para los usuarios de Opera: vista de archivos SVG (haz clic derecho en los gráficos SVG fuente de vista previa).


SVG propiedad de trazo-linecap

atributo strokelinecap define el final de un camino abierto de diferentes tipos:

Aquí está el código SVG:

Ejemplos

<Xmlns = Svg "http://www.w3.org/2000/svg" version = "1.1">
<G relleno = "none" golpe = "negro" stroke-width = "6">
<Ruta accidente cerebrovascular-linecap = "a tope" d = "M5 20 l215 0" />
<Ruta accidente cerebrovascular-linecap = "redondo" d = "M5 40 l215 0" />
<Ruta accidente cerebrovascular-linecap = "cuadrada" d = "M5 60 l215 0" />
</ G>
</ Svg>

Trate »

Para los usuarios de Opera: vista de archivos SVG (haz clic derecho en los gráficos SVG fuente de vista previa).


SVG propiedad de trazo-dasharray

strokedasharray bienes utilizados para crear la línea de puntos:

Aquí está el código SVG:

Ejemplos

<Xmlns = Svg "http://www.w3.org/2000/svg" version = "1.1">
<G relleno = "none" golpe = "negro" stroke-width = "4">
<Ruta accidente cerebrovascular-dasharray = "5,5" d = "M5 20 l215 0" />
<Ruta accidente cerebrovascular-dasharray = "10,10" d = "M5 40 l215 0" />
<Ruta accidente cerebrovascular-dasharray = "20,10,5,5,5,10" d = "M5 60 l215 0" />
</ G>
</ Svg>

Trate »

Para los usuarios de Opera: vista de archivos SVG (haz clic derecho en los gráficos SVG fuente de vista previa).