formato - svg illustrator
Patrón de relleno simple en svg: sombreado en diagonal (7)
Esta es una solución para líneas diagonales usando círculo en patrón. Puede cambiar el ángulo según sus requisitos.
<svg width="500" height="500">
<defs>
<pattern id="transformedPattern"
x="0" y="0" width="2" height="20"
patternUnits="userSpaceOnUse"
patternTransform="rotate(45)">
<circle cx="1" cy="1" r="2" style="stroke: none; fill: #0000ff" />
</pattern>
</defs>
<rect x="10" y="10" width="100" height="100"
style="stroke: #000000; fill: url(#transformedPattern);" />
</svg>
¿Cómo llenaría una forma de SVG, no con un solo color, una imagen o un degradado, pero con un patrón de sombreado, diagonal si es posible?
Han pasado 2 horas y no he encontrado nada (al menos después de 2005).
Me imagino que un posible truco sería un PNG sombreado que serviría como relleno, pero eso no es ideal.
Este código de http://bl.ocks.org/jfsiii/7772281 parece muy limpio y reutilizable:
svg {
width: 500px;
height: 500px;
}
rect.hbar {
mask: url(#mask-stripe)
}
.thing-1 {
fill: blue;
}
.thing-2 {
fill: green;
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>SVG colored patterns via mask</title>
</head>
<body>
<svg>
<defs>
<pattern id="pattern-stripe"
width="4" height="4"
patternUnits="userSpaceOnUse"
patternTransform="rotate(45)">
<rect width="2" height="4" transform="translate(0,0)" fill="white"></rect>
</pattern>
<mask id="mask-stripe">
<rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-stripe)" />
</mask>
</defs>
<!-- bar chart -->
<rect class="hbar thing-2" x="0" y="0" width="50" height="100"></rect>
<rect class="hbar thing-2" x="51" y="50" width="50" height="50"></rect>
<rect class="hbar thing-2" x="102" y="25" width="50" height="75"></rect>
<!-- horizontal bar chart -->
<rect class="hbar thing-1" x="0" y="200" width="10" height="50"></rect>
<rect class="hbar thing-1" x="0" y="251" width="123" height="50"></rect>
<rect class="hbar thing-1" x="0" y="302" width="41" height="50"></rect>
</svg>
</body>
</html>
Estos dos recursos son muy útiles: https://bocoup.com/weblog/using-svg-patterns-as-fills https://github.com/iros/patternfills/blob/master/public/patterns.css
Por ejemplo:
<svg xmlns=''http://www.w3.org/2000/svg'' width=''10'' height=''10''>
<rect width=''10'' height=''10'' fill=''red''/>
<path d=''M-1,1 l2,-2
M0,10 l10,-10
M9,11 l2,-2'' stroke=''orange'' stroke-width=''2''/>
</svg>
Puede crear lo que quiera usando una etiqueta <pattern> .
Como punto de partida, puede tomar este ejemplo del documento MDN respectivo :
<?xml version="1.0"?>
<svg width="120" height="120" viewBox="0 0 120 120"
xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<pattern id="Triangle"
width="10" height="10"
patternUnits="userSpaceOnUse">
<polygon points="5,0 10,10 0,10"/>
</pattern>
</defs>
<circle cx="60" cy="60" r="50"
fill="url(#Triangle)"/>
</svg>
Tampoco encontré nada para la eclosión diagonal en Internet, así que compartiré mi solución aquí:
<pattern id="diagonalHatch" patternUnits="userSpaceOnUse" width="4" height="4">
<path d="M-1,1 l2,-2
M0,4 l4,-4
M3,5 l2,-2"
style="stroke:black; stroke-width:1" />
</pattern>
(tenga en cuenta la minúscula "l" en la expresión de ruta)
Lo anterior crea una escotilla que tiene líneas diagonales desde la esquina inferior izquierda hasta la esquina superior derecha que están separadas por 4 píxeles. Al lado de la línea diagonal ( M0,4 l4,-4 ) también debe M0,4 l4,-4 bordes superior izquierdo e inferior derecho del área del patrón, ya que de lo contrario la línea se "estrechará" debido al recorte donde interseca los bordes del cuadrado.
Para llenar un rectángulo con este patrón, hazlo:
<rect x="0" y="0" width="100%" height="100%" fill="url(#diagonalHatch)"/>
Un problema al dibujar una línea diagonal dentro de un patrón es que cuando el patrón está en mosaico, las líneas no siempre se alinearán, especialmente con un zoom alto. (Depende del motor de renderizado SVG que esté usando). La respuesta de @Ingo anterior intenta resolver esto dibujando los triángulos en las esquinas superior izquierda e inferior derecha, pero de nuevo, usando algunos motores de renderizado y zooms altos, no siempre se ve mejor, y algunas veces la línea termina buscando un poco como una cadena de salchichas.
Otro enfoque es trazar una línea horizontal en el patrón y rotar el patrón, por ejemplo
<svg:svg viewBox="0 0 100 100" version="1.1"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<svg:defs>
<svg:pattern id="diagonalHatch" patternUnits="userSpaceOnUse" width="4" height="4" patternTransform="rotate(45 2 2)">
<svg:path d="M -1,2 l 6,0" stroke="#000000" stroke-width="1"/>
</svg:pattern>
</svg:defs>
<svg:rect x="0" y="0" height="100" width="100" fill="url(#diagonalHatch)"/>
Use el atributo patternTransform para rotar un segmento de línea vertical (u horizontal). Este método funciona a la perfección y usa la ruta más simple posible. El atributo de width patrón controla cuán cerca están los sombreados paralelos.
<pattern id="diagonalHatch" width="10" height="10" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
<line x1="0" y1="0" x2="0" y2="10" style="stroke:black; stroke-width:1" />
</pattern>