Esta propiedad define un camino.
uso
Atributos de definición de rutas de categoría
valor
Variabilidad Sí
Documentación de la especificación SVG 1.1 (2ª edición)
La propiedad d es en realidad una cadena que contiene una serie de descripciones de caminos. Estos caminos consisten en las siguientes instrucciones:
- Moveto
- Lineto
- Curveto
- Arcto
- CerrarCamino
Estos se combinan en una cuerda. Estos diferentes comandos son sensibles a mayúsculas y mayúsculas; Un comando en mayúsculas indica que sus parámetros son posiciones absolutas, mientras que los comandos en minúsculas indican un punto relativo a la posición actual. Se puede especificar un valor negativo como parámetro para el comando: el ángulo negativo será en sentido antihorario y las posiciones absolutas x e y se considerarán coordenadas negativas. El valor relativo negativo x se moverá hacia la izquierda, mientras que el valor relativo y negativo subirá.
Moveto
El comando Moveto puede entenderse como coger un bolígrafo y aterrizar en otro lugar. No se traza ningún segmento de línea entre el punto anterior y este punto especificado. Es buena idea iniciar un camino con un comando Moveto, porque sin un Moveto inicializado, el punto de inicio será donde ocurrió la operación anterior, lo que puede llevar a comportamientos indeterminados.
Sintaxis:
M, x, y aquí x e y son coordenadas absolutas, que representan respectivamente las coordenadas horizontales y verticales.
m dx, dy aquí dx y dy son las distancias relativas al punto actual, a la derecha y hacia abajo, respectivamente.
Ejemplo:
En posición absoluta x=50, y= 100:<camino d="M50,100..." />
Muévete 50 a la derecha, 100 abajo: <camino d="m50,100..." />
Lineto
A diferencia del comando Moveto, el comando Lineto dibuja un segmento recto. Este segmento de línea recta se mueve de la posición actual a la posición especificada. La sintaxis del comando nativo Lineto es "L x, y" o "l dx, dy", donde x e y son coordenadas absolutas, y dx y dy son las distancias a la derecha y hacia abajo, respectivamente. También existen las letras H y V, que especifican movimientos horizontal y vertical, respectivamente. Tienen la misma sintaxis que L, y su versión minúscula es la distancia relativa, y la versión mayúscula es la posición absoluta.
Curveto
El comando Curvto especifica una curva de Bézier. Existen dos tipos de curvas de Bézier: cúbicas y cuadráticas. Una curva de Bézier cuadrática es una curva de Bézier cúbica especial donde los dos extremos del punto de control son iguales. La sintaxis de una curva cuadrática de Bézier es "Q cx, cy x, y" o "q dcx, dcy dx, dy". Cx y Cy son ambas coordenadas absolutas de puntos de control, mientras que DCX y DCY son las distancias de los puntos de control en las direcciones X e Y, respectivamente.
La curva cúbica de Bézier sigue el mismo concepto que la curva cuadrática de Bézier, pero necesita considerar dos puntos de control. La sintaxis de la curva cúbica de Bézier es: "C c1x, c1y c2x, c2y x, y" o "c dc1x, dc1y dc2x, dc2y dx, dy", donde c1x, c1y y c2x, c2y son las coordenadas absolutas de los puntos de control de los puntos de inicio y fin, respectivamente. DC1X, DC1Y y DC2X, DC2Y son relativos al punto de inicio, no al punto final. dx y dy son las distancias a la derecha y hacia abajo, respectivamente.
Para conectar curvas de Bézier suaves, también puedes usar los comandos T y S. Su sintaxis es más sencilla que la de otros comandos de Curveto porque asume que el primer punto de control es un reflejo del punto de control anterior sobre el anterior, o que en realidad es el punto anterior si no hay ningún punto de control anterior. La sintaxis de T es "T x,y" o "t dx,dy", que corresponden a coordenadas absolutas y distancias relativas respectivamente, y se utiliza para crear una curva de Bézier cuadrática. S se utiliza para crear una curva cúbica de Bézier, cuya sintaxis es "S cx, cy x, y" o "s dcx, dcy dx, dy", donde (d)cx especifica el segundo punto de control.
Finalmente, todos los comandos de curva de Bézier pueden crear un grafo de Bézier multilado, inicializar primero el comando y luego especificar todos los parámetros varias veces para crear un grafo de Bézier multilado. Por lo tanto, los siguientes dos comandos pueden crear exactamente el mismo camino:
Arcto
A veces es más sencillo describir un camino de curva de arco elíptico que un camino de curva de Bézier. Al final del día, el elemento camino soporta el comando Arcto. El centro del arco se calcula mediante otras variables. Una declaración arcto es relativamente una repetición de Visual Studio: "A rx, ry xAxisRotate LargeArcFlag, SweepFlag x, y". Desmontándolo, rx y ry son los radios en las direcciones x e y, respectivamente, y el valor de LargeArcFlag es 0 o 1 para determinar si se debe dibujar un arco pequeño (0) o uno grande (1). La bandera de barrido también es 0 o 1, que se utiliza para determinar si el arco es en sentido horario (1) o antihorario (0). x e y son las coordenadas del destino. Aunque xAxisRotate soporta cambiar la orientación del eje x respecto al sistema de referencia actual, este parámetro no parece tener mucho efecto en Gecko 7.
CerrarCamino
El comando ClosePath simplemente dibujará una línea recta desde el punto actual hasta el primer punto en el camino actual. Es el comando más sencillo y no viene con ningún parámetro. Sigue el camino lineal más corto hasta el punto de inicio, y si otros caminos caen en este camino, los posibles caminos se intersectan. La sintaxis es "Z" o "z", y ambos métodos de escritura tienen la misma función.
elemento
Los siguientes elementos pueden usar el atributo d:
Las mismas reglas pueden <animate>aplicarse a los caminos de animación.
Recordatorio
El origen (sistema de coordenadas 0,0 puntos) suele estar en la esquina superior izquierda del contexto. Sin embargo<glyph>, el origen del elemento está en la esquina inferior izquierda de su buzón.
Se permite una coma entre dos números cualesquiera, pero no en ningún otro lugar.
ejemplo
<SVG versión="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 50 50" enable-background="nuevo 0 0 50 50" xml:space="preserve">
<path fill="#F7931E" d="M37,17v15H14V17H37z M50,0H0v50h50V0z"/>
</svg>
Para demostrar qué significa realmente d="M37,17v15H14V17H37z M50,0H0v50h50V0z", hablemos de cada subpárrafo de esta cadena.
d=" M37,17 || v15 || H14 || V17 || H37 || z // M50,0 || H0 || v50 || h50 || V0 || z"
d=
Esta propiedad contiene las cadenas que conforman todo el SVG.
M37,17
M es la abreviatura de MoveTo. La "M" mayúscula significa coordenadas absolutas, y la "m" minúscula indica distancia relativa. Implica que se basa en las coordenadas de inicio, la línea está dentro de la caja y empiezas en la esquina superior derecha del rectángulo dentro de la caja.
37 es la abreviatura de la posición inicial del SVG, en 37 píxeles en el eje X.
17 Posición inicial svg, en 17 píxeles en el eje y.
v15
V significa vertical. La V mayúscula indica las coordenadas absolutas, y la V minúscula indica la longitud y distancia relativas. dx/dy y x/y pueden usarse en las posiciones correspondientes de H/V y h/v.
Aquí se representa dibujando una línea vertical de 15 píxeles respecto a una coordenada dada. Significa que dibujas 15 píxeles hacia abajo hasta las coordenadas 37,32.
H14
H significa nivel, que es coordenadas absolutas porque está en mayúscula.
Desde el final de la v15, traza una línea horizontal hasta alcanzar la coordenada absoluta 14, y termina el dibujo cuando llegue a la coordenada x 14. Los trazos se encuentran en las coordenadas 14,32.
V17
Como antes, empieza desde el final de la línea anterior y dibuja una línea vertical hasta llegar a la coordenada 17 del eje y. Los trazos se encuentran en las coordenadas 14 y 17.
H37
Finalmente, empezando por 14, 17, dibuja una línea horizontal hasta alcanzar la coordenada 37 del eje x. El trazo se encuentra en las coordenadas 37,17 (valor de M)
z
Tanto la Z minúscula como la Z mayúscula cierran una serie de segmentos SVG.
,
Una coma inicia la siguiente cadena de segmentos simples de gráficos vectoriales. La siguiente serie de segmentos de línea vectorial simples formará la caja exterior.
M50,0
Empieza en el eje x 50 y el eje y 0.
H0
Dibuja una línea recta hasta (0,0).
v50
Dibuja una línea vertical de 0,0 píxeles respecto a 50. Esta línea se dibujará hasta (0,50).
H50
Dibuja una línea horizontal de 50 píxeles respecto a (0,-50). Esta línea se dibujará hacia la derecha de (50,50).
V0
Dibuja una línea vertical hasta llegar a la coordenada 0 del eje y. Esto dibujará una línea a (50,0), que es el valor de M.
z
Tanto la Z minúscula como la Z mayúscula cierran una serie de segmentos SVG.
Adjunta el código:
Finalmente, se adjunta el enlace al documento: https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/d
|
Publicado en 4/5/2018 11:29:47
|
|
|
|
