Aprenda patrones SVG (7) y rellenos degradados

¡Acostúmbrate a escribir juntos! Este es el séptimo día de mi participación en el "Nuevo plan diario de Nuggets · Desafío de actualización de abril", haga clic para ver los detalles del evento .

Introducción

Además de los colores sólidos, también se pueden usar patrones y degradados para rellenar y delinear gráficos en SVG.

relleno de patrón

• Los rellenos de patrón requieren el uso de patternselementos, uno de los tipos de relleno.
• patternUnitsLa propiedad establece cómo se organizan los patrones. Valor predeterminado objectBoundingBox.

1. Cuando se utiliza objectBoundingBox, el tamaño del patrón se calcula en función del tamaño del objeto que se va a rellenar.

    <svg width="400" height="400">
      <defs>
        <pattern id="pa" x="0" y="0" patternUnits="objectBoundingBox" width="20%" height="20%">
          <path d="M 0 0 h 20 v 20 h -20 z" style="stroke: black; fill: none"></path>
        </pattern>
      </defs>

      <rect width="100" height="100" stroke="#aaa" fill="url(#pa)" />
      <rect x="110" width="200" height="200" stroke="#aaa" fill="url(#pa)" />
    </svg>
复制代码

1.2 Establezca el ancho y la altura al 20%. Se dibuja un cuadrado de 20px en el patrón. Se intercepta la primera imagen que es un 20 % más pequeña que el cuadrado de 20 px y, a continuación, se coloca el patrón en mosaico. La segunda imagen es un 20 % más grande que 20 px, el patrón se vuelve más grande y luego se coloca en mosaico.

2. Usa userSpaceOnUseatributos para width和heighthacer patrones de acuerdo a.

  <pattern id="pa" x="0" y="0" patternUnits="userSpaceOnUse" width="40" height="40">
    <path d="M 0 0 h 40 v 40 h -40 z" style="stroke: black; fill: none"></path>
    <path d="M 20 22 A 5 10 -45 1 0 20 34" fill="#aaa" />
    <path d="M 20 22 A 5 10 45 1 1 20 34" fill="#aaa" />
  </pattern>

  <rect fill="url(#pa)" stroke="black" x="0" y="0" width="200" height="200" />
复制代码

2.2 width和heightMosaico del patrón generado según la configuración.

• patternContentUnitsLa propiedad establece qué tipo de gráficos tienen ancho y alto en el patrón. Valor predeterminado userSpaceOnUse.

1. userSpaceOnUseEstablece el tamaño del patrón utilizando el tipo de coordenadas predeterminado px.
2. objectBoundingBoxUtilice porcentajes para establecer el tamaño del patrón.

      <defs>
        <pattern
          id="pa"
          x="0"
          y="0"
          width=".2"
          height=".2"
          patternUnits="objectBoundingBox"
          patternContentUnits="objectBoundingBox"
        >
          <path d="M 0 0 h 0.2 v 0.2 h -0.2z" style="stroke: black; stroke-width: 0.01; fill: none"></path>
        </pattern>
      </defs>
      <rect width="100" height="100" stroke="#aaa" fill="url(#pa)" />
      <rect x="110" width="200" height="200" stroke="#aaa" fill="url(#pa)" />
复制代码

2.1 Los cuadrados en el patrón visible también se calculan como porcentajes.

Relleno degradado

• linearGradientDegradado lineal, una serie de colores que transitan a lo largo de una línea recta, especificando el color deseado en una ubicación específica.
• Atributos:

1. x1,y1El punto inicial del degradado, expresado como un porcentaje. La dirección predeterminada del degradado es de izquierda a derecha.
2. x2,y2La posición final del gradiente, expresada como porcentaje.
3. spreadMethodEstablezca el método de relleno degradado.

      <defs>
        <linearGradient id="linear" x1="100%" y2="100%">
          <stop offset="0%" style="stop-color: #ffcc00"></stop>
          <stop offset="100%" style="stop-color: #0099cc"></stop>
        </linearGradient>
      </defs>
      <rect x="10" y="10" width="200" height="100" fill="url(#linear)"></rect>
复制代码

• radialGradientDegradado radial, donde cada punto de degradado es una ruta circular que se extiende desde el punto central.
• Atributos:

1. cx,cy,rDefine el rango del degradado.La unidad de medida del radio es el ancho y alto promedio del objeto. El valor predeterminado es 50%.
2. fx,fyEl centro de la ruta del círculo donde se encuentra el punto 0%.
3. spreadMethodEstablece el caso en el que el rango de dibujo no alcanza el borde del gráfico.

      <defs>
        <radialGradient id="rad" cx="0%" cy="0%" r="60%">
          <stop offset="0%" style="stop-color: #f96" />
          <stop offset="50%" style="stop-color: #9c9" />
          <stop offset="100%" style="stop-color: #906" />
        </radialGradient>
        <radialGradient id="pad" xlink:href="#rad" spreadMethod="pad" />
        <radialGradient id="repeat" xlink:href="#rad" spreadMethod="repeat" />
        <radialGradient id="reflect" xlink:href="#rad" spreadMethod="reflect" />
      </defs>
      <rect x="10" y="10" width="100" height="100" fill="url(#pad)" />
      <rect x="10" y="120" width="100" height="100" fill="url(#repeat)" />
      <rect x="10" y="230" width="100" height="100" fill="url(#reflect)" />
复制代码

• stopelemento, establezca el punto de degradado.

1. offsetpropiedad para especificar la ubicación del punto de degradado. El rango de valores es 0%-100%.
2. stop-colorAtributo, correspondiente al offsetcolor del punto de posición.
3. stop-opacityAtributo, correspondiente a offsetla opacidad del punto de posición.