Recientemente, estoy aprendiendo una visualización de datos front-end D3.js. Su dibujo de gráfico se basa en SVG. Como novato, no sé qué es SVG, así que decidí dejar de lado D3.js y aprender sobre SVG primero. .
Entonces, ¿qué es SVG? La Enciclopedia Baidu lo presentó así: "SVG es un formato de archivo gráfico. Su nombre completo en inglés es Scalable Vector Graphics, que significa gráficos vectoriales escalables . por la alianza W3C). Estrictamente hablando, debe ser un lenguaje de gráficos vectoriales de estándar abierto que le permita diseñar páginas de gráficos web emocionantes y de alta resolución. Los usuarios pueden usar código directamente para describir imágenes y pueden usar cualquier texto. La herramienta de procesamiento se abre la imagen SVG, cambia parte del código para hacer que la imagen sea interactiva y se puede insertar en el HTML en cualquier momento para ver a través del navegador".
Después de leerlo, no sabía qué hacer, al igual que escuchar palabras como función y ecuación cuando era niño, porque los sustantivos no tienen fundamento, así que estaba asustado antes de aprenderlo. No se deje intimidar por términos desconocidos. Desde mi experiencia de autoaprendizaje, SVG es realmente muy simple. Aunque está basado en XML, no importa si no entiende XML. Después de todo, HTML también es un marcado. idioma Siempre que haya utilizado HTML, definitivamente puede comprender el siguiente contenido.
1. Usando SVG en HTML
(1) Puede incrustar directamente el código SVG en HTML
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" style="height: 300px; width: 500px">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>
</body>
xmlns es un espacio de nombres. Aquellos que no entiendan XML pueden no saber lo que significa. No importa. Este parámetro es fijo, así que simplemente escríbalo.
A través del código anterior, se puede dibujar un círculo en la página.
(2) Cree un archivo SVG separado e introdúzcalo en HTML
Cree un archivo example1.svg con el siguiente contenido:
<svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" stroke="black" stroke-width="4" fill="grey" />
<text x="150" y="115" font-size="20" text-anchor="middle" fill="red">SVG NB</text>
</svg>
Luego introdúcelo en HTML a través de etiquetas:
<iframe src="example1.svg" style="width: 350px; height: 250px"></iframe>
<embed src="example2.svg" type="image/svg+xml" />
<object data="example3.svg" type="image/svg+xml"></object>
Estas tres etiquetas son todas aplicables al estándar HTML5 y actualmente son compatibles con la mayoría de los navegadores.
El efecto es:
Por supuesto, también puede usar la etiqueta "<a>" para crear un enlace al archivo SVG
<a href="example1.svg">SVG文件</a>2. Etiqueta de forma básica
SVG proporciona algunas etiquetas para ayudarnos a dibujar rápidamente formas comunes.
(1) Rectángulo
<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>La configuración del estilo también es muy simple, al igual que la hoja de estilo en línea de CSS, y los nombres de los atributos son básicamente los mismos que cuando se usa CSS en HTML, como se indicó anteriormente. La única diferencia que he usado hasta ahora es que las esquinas redondeadas del rectángulo se configuran con los dos atributos rx y ry.
También es posible eliminar el estilo = "" y escribir todo en forma de atributo = valor, de la siguiente manera:
<rect width="300" height="100" fill=rgb(0,0,255) stroke-width=1 stroke=rgb(0,0,0)/>(2) Ronda
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />cx y cy definen la posición del centro del círculo, si no se establece, es (0,0), y r es el radio.
(3) Elipse
<ellipse cx="240" cy="50" rx="220" ry="30" style="fill:yellow"/>La diferencia entre una elipse y un círculo es que una elipse tiene un eje mayor y un eje menor, por lo que hay dos atributos rx y ry que representan las longitudes de los ejes horizontal y vertical respectivamente.
(4) línea recta
<line x1="0" y1="0" x2="200" y2="200"/>La línea recta también es muy simple, solo use dos conjuntos de coordenadas (x, y) para establecer el punto de inicio y el punto final respectivamente.
(5) Polilínea
<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"/>Las polilíneas en realidad no son complicadas, solo definen algunos puntos más que las líneas rectas. Tenga en cuenta que cada grupo de puntos está separado por espacios en lugar de punto y coma.
(6) Polígono
Un polígono es un poco más complicado, es similar a una polilínea y también define algunos puntos, pero el último punto se conectará con el primero para formar una figura cerrada.
La clave está en el atributo regla de relleno, que se utiliza para determinar si un área del lienzo pertenece al "interior" del gráfico (se rellenará el área interior). Por supuesto, para gráficos simples como triángulos o rectángulos. que no se cruzan, no hace falta Usando este atributo, el siguiente ejemplo es una estrella de cinco puntas.
<polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />
1. La regla de relleno predeterminada es distinta de cero Su regla es juzgar si un punto está en el gráfico, hacer un rayo en cualquier dirección desde el punto y luego detectar la intersección del rayo y la ruta del gráfico. El conteo comienza desde 0, el conteo aumenta en 1 cuando el camino pasa a través del rayo de izquierda a derecha, y el conteo disminuye en 1 cuando el camino pasa a través del rayo de derecha a izquierda. Después de obtener el resultado del conteo, si el resultado es 0, el punto se considera fuera del gráfico, de lo contrario, se considera que está dentro.
Por ejemplo, el punto P en la figura anterior y el rayo formado desde el punto P han pasado por los caminos BC y EA de los dos gráficos, ambos caminos pasan por el rayo de derecha a izquierda, por lo que la cuenta es 2 y el punto se considera interior.
2. El otro valor de la regla de relleno es evenod, que también hace rayos, pero después de terminar el número de intersecciones con la ruta gráfica, se considera que un número impar está adentro y un número par se considera afuera. Entonces, después de cambiar la regla de relleno en el código anterior a evenodd, se convierte en el siguiente efecto.
(7) Camino
La diferencia entre rutas y polilíneas es que las polilíneas conectan puntos con líneas rectas, mientras que las rutas pueden dibujar curvas suaves a través de parámetros. Una ruta puede lograr el efecto de una polilínea, pero una polilínea no puede reemplazar una ruta.
La ruta es la más complicada de estas etiquetas, con muchos parámetros, y cuando se usan diferentes parámetros, el número de puntos seguidos también es diferente. Quiero escribir un artículo aparte después de probar todos los diferentes parámetros de la ruta. Haz una introducción detallada. a la ruta, lo siguiente es solo una introducción. Se ha publicado una explicación detallada de la ruta, y el enlace es:
<path d="M 0 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" />
Los parámetros son los siguientes: se pueden usar letras minúsculas, pero los significados son diferentes. Mayúsculas significa posicionamiento absoluto absoluto, mientras que minúsculas significa posicionamiento relativo.
- M = mover para empezar
- L = línea a enlace
- H = línea horizontal a línea horizontal
- V = línea vertical a línea vertical
- C = curva a curva, curva Bezier cúbica
- S = curva suave también es una curva, curva Bezier cúbica
- Q = curva de Bézier cuadrática curva de Bézier cuadrática
- T = curva de Bézier cuadrática suave a curva de Bézier cuadrática
- A = arco elíptico
- Z = closepath close (conecta la línea desde el último punto hasta el punto inicial)
Entonces, el significado del código anterior es comenzar desde (0, 350), usar la curva de Bézier cuadrática para controlar el punto de control (150, -300) y finalmente alcanzar el punto final (300, 0), que no está cerrado. (Tenga en cuenta que se usa la q minúscula, por lo que (150, -300) y (300, 0) aquí son relativos al punto de inicio y no están en el mismo sistema de coordenadas que el punto de inicio (0, 350)). Aquí hay solo una introducción aproximada, el análisis detallado de todos los comandos en la ruta estará en el próximo artículo.
3. Etiqueta de texto
El uso básico es muy simple, solo escriba texto entre las etiquetas de inicio y final como HTML.
(1) Subtexto
Cada <tspan>, como <text>, ocupa una línea separada y puede tener su propio estilo. Pero debe estar envuelto en la etiqueta <text> y no puede usarse solo.
<text x="10" y="20" style="fill:rgb(0, 174, 255);">峰兄兄:
<tspan x="10" y="45">菜鸡程序员</tspan>
<tspan x="10" y="70">正在努力中</tspan>
</text>
(2) Rotar texto
<text x="10" y="45" transform="rotate(90 20,40)">正在努力中</text>Los tres parámetros en rotación son los grados de rotación en el sentido de las agujas del reloj, la distancia de traslación vertical y horizontal (los valores positivos indican hacia arriba y hacia la derecha)
(3) Texto a lo largo de la ruta
Defina una ruta y luego configúrela a través de la etiqueta textPath
<defs>
<path id="path1" d="M 0 100 q 100 80 200 0" stroke="blue" stroke-width="5" fill="none" />
</defs>
<text x="10" y="100" style="fill:red;">
<textPath xlink:href="#path1">祝你天天开心，都有好心情</textPath>
</text> 
Lo anterior es el contenido para comenzar con SVG, seguido de un resumen detallado de la ruta y el color del degradado.
escribir al final
Este es un artículo que publiqué en Rare Earth Nuggets. La página de inicio personal de Rare Earth Nuggets es la página de inicio personal del hermano Feng - Noticias - Nuggets . Ambos lados se actualizarán, y el otro lado generalmente será unos días antes. Bienvenidos a todos a prestar atención ~
Todas las imágenes en el artículo son capturas de pantalla del código cuando ejecuto mi propia práctica. El diagrama esquemático también se basa en las capturas de pantalla y editado en la herramienta de dibujo. Espero ser reconocido por más personas y respetar mi trabajo. Resultados, por favor no reimprimir sin permiso ~