Einfaches Füllmuster in SVG: diagonale Schraffur

Question 1

Wie würde ich eine SVG-Form füllen, nicht mit einer einzelnen Farbe, einem Bild oder einem Farbverlauf, sondern mit einem Schraffurmuster, wenn möglich diagonal.

Es ist 2 Stunden her und ich habe nichts gefunden (zumindest nach 2005).

Ich denke, ein möglicher Hack wäre ein schraffiertes PNG, das als Füllung dienen würde, aber das ist nicht ideal.

Question 2

Ich habe auch im Internet nichts für diagonale Schraffuren gefunden, daher werde ich meine Lösung hier teilen:

<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>

(Beachten Sie den Kleinbuchstaben "l" im Pfadausdruck)

Das Obige erzeugt eine Schraffur mit diagonalen Linien von links unten nach rechts oben, die 4 Pixel voneinander entfernt sind. Neben der diagonalen Linie ( M0,4 l4,-4) müssen Sie auch den oberen linken und den unteren rechten Rand des Musterbereichs streichen, da die Linie sonst aufgrund von Übersteuerungen, die die Kanten des Quadrats schneiden, "eingeengt" wird.

Ein Beispiel für ein Muster nach dem Anwenden der obigen Schritte zeigt, wie das Muster, mit dem es betitelt wurde, das Endprodukt ergibt

Um ein Rechteck mit diesem Muster zu füllen, gehen Sie wie folgt vor:

<rect x="0" y="0" width="100%" height="100%" fill="url(#diagonalHatch)"/>

Question 3

Verwenden Sie das Attribut patternTransform, um ein vertikales (oder horizontales) Liniensegment zu drehen. Diese Methode kachelt nahtlos und verwendet den einfachsten Pfad. Das Musterattribut widthsteuert, wie eng parallele Schraffuren sind.

<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>

Question 4

Möglicherweise können Sie mithilfe eines <pattern>Tags erstellen, was Sie möchten .

Als Ausgangspunkt können Sie dieses Beispiel des jeweiligen MDN-Dokuments nehmen :

    <?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>

Erweitern Sie das Snippet

Question 5

Dieser Code von http://bl.ocks.org/jfsiii/7772281 scheint sehr sauber und wiederverwendbar zu sein:

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>

Erweitern Sie das Snippet

Question 6

Ein Problem beim Zeichnen einer diagonalen Linie innerhalb eines Musters besteht darin, dass beim Kacheln des Musters die Linien nicht immer ausgerichtet sind - insbesondere bei hohen Zooms. (Dies hängt von der SVG-Rendering-Engine ab, die Sie gerade verwenden.) Die obige Antwort von @ Ingo versucht, dieses Problem zu lösen, indem die Dreiecke oben links und unten rechts gezeichnet werden. Bei Verwendung einiger Rendering-Engines und hoher Zooms sieht es jedoch nicht immer am besten aus. Manchmal sieht die Linie auch so aus ein bisschen wie eine Reihe von Würstchen.

Ein anderer Ansatz besteht darin, eine horizontale Linie in das Muster zu zeichnen und das Muster zu drehen, z

  <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)"/>

Question 7

Diese beiden Ressourcen sind sehr hilfreich: https://bocoup.com/weblog/using-svg-patterns-as-fills https://github.com/iros/patternfills/blob/master/public/patterns.css

Zum Beispiel:

<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>

Question 8

Dies ist eine Lösung für diagonale Linien mit Kreis im Muster. Sie können den Winkel gemäß Ihren Anforderungen ändern.

<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>

Question 9

Ich habe es mit diesem Beispiel versucht. Hoffentlich kann es Ihnen viel helfen.

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title>SVG colored patterns via mask</title>
  </head>
  <body>
    <svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <pattern id="stripes" viewBox="0,0,8,8" width="16" height="16" patternUnits="userSpaceOnUse">
          <polygon points="0,0 4,0 0,4" fill="yellow"></polygon>
          <polygon points="0,8 8,0 8,4 4,8" fill="yellow"></polygon>
          <polygon points="0,4 0,8 8,0 4,0" fill="green"></polygon>
          <polygon points="4,8 8,8 8,4" fill="green"></polygon>
        </pattern>
      </defs>
	  <rect fill="url(#stripes)" x="150" y="20" width="100" height="50" />
      <circle cx="50"  cy="50" r="50" fill="url(#stripes)"/>
    </svg>
  </body>
</html>

Erweitern Sie das Snippet

Grüße, Vu Phan

Question 10

SVG 2 hat speziell für diesen Zweck eine hatchEntität . Aus dem Beispielabschnitt dieser Seite:

<hatch hatchUnits="userSpaceOnUse" pitch="5" rotate="135">
  <hatchpath stroke="#a080ff" stroke-width="2"/>
</hatch>

Dies ist eine sehr einfach zu konfigurierende Methode zum Erstellen von Luken:

Darüber hinaus kann der Schraffurpfad auch angepasst werden:

<hatchpath stroke-width="1" d="C 0,4 8,6 8,10 8,14 0,16 0,20"/>

Question 11

Für React Native kann diese Komponente verwendet werden, um Hintergrundlinienmuster zu erstellen. Sie sollten Ihrem Projekt react-native-svg hinzufügen

import PropTypes from 'prop-types';
import React, { PureComponent } from "react";
import { View } from "react-native";
import Svg, { Defs, Line, Pattern, Rect } from 'react-native-svg';

export default class PatternLineView extends PureComponent {

  static propTypes = {
    pattern: PropTypes.func.isRequired,
    space: PropTypes.number,
    backgroundColor: PropTypes.string,
    lineColor: PropTypes.string,
    lineWidth: PropTypes.number,
    rotation: PropTypes.number
  }

  static defaultProps = {
    pattern: () => { },
    space: 8,
    lineColor: "#D2D9E5",
    lineWidth: 3,
    rotation: 45
  }

  render() {
    const transform = `rotate(${this.props.rotation})`
    return <View style={{
      flex: 1,
      flexDirection: "row",
      height: "100%",
      width: "100%",
      position: "absolute",
      top: 0,
      start: 0,
      backgroundColor: this.props.backgroundColor
    }}>
      <Svg width="100%" height="100%">
        <Defs>
          <Pattern
            id="linePattern"
            patternUnits="userSpaceOnUse"
            patternTransform={transform}
            width={this.props.space}
            height={this.props.space}>
            <Line
              x1="0"
              y1="0"
              x2="0"
              y2="100%"
              stroke={this.props.lineColor}
              strokeWidth={this.props.lineWidth}
            />
          </Pattern>
        </Defs>

        <Rect
          fill="url(#linePattern)"
          x="0"
          y="0"
          width="100%"
          height="100%"
        />
      </Svg>
    </View>
  }
}

Question 12

Ich habe Ingos Antwort hier angepasst .

<defs>
    <pattern id="diagonalHatch" patternUnits="userSpaceOnUse" width="4" height="4">
        <!-- background -->
        <path id="background"
            d="M-1,3 L3,-1
               M1,5 L5,1" style="stroke:pink; stroke-width:10" />
        <!-- hatches -->
        <path id="hatches"
            d="M-2,2 L2,-2
               M0,4 L4,0
               M2,6 L6,2" style="stroke:red; stroke-width:1" />
    </pattern>
</defs>

Dieses Muster enthält zwei Pfade, einen für den Hintergrund und einen für die Schraffuren. Die Hintergrundfarbe ist gegenüber JS adressierbar, z. B.:

const hatchPath = document.querySelector("path#hatches");

hatchPath.setAttribute('style', "stroke:blue; stroke-width:1")

Der Hintergrundpfad ist absichtlich zu breit, sodass kein Teil des Musters zumindest vom Hintergrund abgedeckt wird. In der Zwischenzeit kann die Breite der Luken angepasst werden, um die Dicke der Linien zu ändern.

Answer 1

76

Wie würde ich eine SVG-Form füllen, nicht mit einer einzelnen Farbe, einem Bild oder einem Farbverlauf, sondern mit einem Schraffurmuster, wenn möglich diagonal.

Es ist 2 Stunden her und ich habe nichts gefunden (zumindest nach 2005).

Ich denke, ein möglicher Hack wäre ein schraffiertes PNG, das als Füllung dienen würde, aber das ist nicht ideal.

svg Cystack
quelle

Leute, die immer noch nach einer Lösung für diagonale Schraffuren suchen, möchten vielleicht stattdessen hier beginnen: stackoverflow.com/a/22401717/1717535

Fabien Snauwaert

Hier ist eine großartige Geige, die ich dabei gefunden habe jsfiddle.net/h5NMP

john ktejik

Answer 2

Leute, die immer noch nach einer Lösung für diagonale Schraffuren suchen, möchten vielleicht stattdessen hier beginnen: stackoverflow.com/a/22401717/1717535

Fabien Snauwaert

Answer 3

Hier ist eine großartige Geige, die ich dabei gefunden habe jsfiddle.net/h5NMP

john ktejik

Answer 4

123

Ich habe auch im Internet nichts für diagonale Schraffuren gefunden, daher werde ich meine Lösung hier teilen:

<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>

(Beachten Sie den Kleinbuchstaben "l" im Pfadausdruck)

Das Obige erzeugt eine Schraffur mit diagonalen Linien von links unten nach rechts oben, die 4 Pixel voneinander entfernt sind. Neben der diagonalen Linie ( M0,4 l4,-4) müssen Sie auch den oberen linken und den unteren rechten Rand des Musterbereichs streichen, da die Linie sonst aufgrund von Übersteuerungen, die die Kanten des Quadrats schneiden, "eingeengt" wird.

Ein Beispiel für ein Muster nach dem Anwenden der obigen Schritte zeigt, wie das Muster, mit dem es betitelt wurde, das Endprodukt ergibt

Um ein Rechteck mit diesem Muster zu füllen, gehen Sie wie folgt vor:

<rect x="0" y="0" width="100%" height="100%" fill="url(#diagonalHatch)"/>

Ingo Kegel
quelle

4

Ich musste dem Pfad im Muster einen Stil hinzufügen, damit er sichtbar wurde: zum Beispiel (wie akarve): style = "Strich: schwarz; Strichbreite: 1"

Lode

1

Als ich versuchte, dieses Muster auf 20 x 20 px (mit 8 px Strich) zu vergrößern und das Ergebnis bei höherem Zoom zu testen, erschien der Effekt "Wurstkette". Ich konnte es beheben, indem ich die Ecklinien verlängerte, z M 0 0 L 20 20 M 10 -10 L 30 10 M -10 10 L 10 30.

Hon2a

3

Der Effekt "Würstchen" kann durch Anti-Aliasing verursacht werden. Versuchen Sie es hinzuzufügen shape-rendering="cripsEdges".

David R.

1

@Ingo Kegel Verzeihen Sie mir, dass ich gefragt habe, aber ich kann online keine Erklärung finden. Wie würde ich die Parameter ändern, um einen Abstand von 10 statt 4 zu haben?

Tim der Verzauberer

1

Ändern Sie den Pfad zuM-1,1 l2,-2 M0,10 l10,-10 M9,11 l2,-2

Ingo Kegel

Answer 5

4

Ich musste dem Pfad im Muster einen Stil hinzufügen, damit er sichtbar wurde: zum Beispiel (wie akarve): style = "Strich: schwarz; Strichbreite: 1"

Lode

Answer 6

1

Als ich versuchte, dieses Muster auf 20 x 20 px (mit 8 px Strich) zu vergrößern und das Ergebnis bei höherem Zoom zu testen, erschien der Effekt "Wurstkette". Ich konnte es beheben, indem ich die Ecklinien verlängerte, z M 0 0 L 20 20 M 10 -10 L 30 10 M -10 10 L 10 30.

Hon2a

Answer 7

3

Der Effekt "Würstchen" kann durch Anti-Aliasing verursacht werden. Versuchen Sie es hinzuzufügen shape-rendering="cripsEdges".

David R.

Answer 8

1

@Ingo Kegel Verzeihen Sie mir, dass ich gefragt habe, aber ich kann online keine Erklärung finden. Wie würde ich die Parameter ändern, um einen Abstand von 10 statt 4 zu haben?

Tim der Verzauberer

Answer 9

1

Ändern Sie den Pfad zuM-1,1 l2,-2 M0,10 l10,-10 M9,11 l2,-2

Ingo Kegel

Answer 10

64

Verwenden Sie das Attribut patternTransform, um ein vertikales (oder horizontales) Liniensegment zu drehen. Diese Methode kachelt nahtlos und verwendet den einfachsten Pfad. Das Musterattribut widthsteuert, wie eng parallele Schraffuren sind.

<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>

akarve
quelle

4

Bisher beste Lösung: einfach (keine komplexe Geometrie) und flexibel (jeder Drehwinkel kann eingestellt werden und das widthMusterattribut legt den Abstand zwischen den Streifen fest). Um es noch einfacher zu machen, würde ich <line x1="0" y1="0" x2="0" y2="2" style="stroke:black; stroke-width:1" />anstelle von verwenden <g>...</g>.

David Bonnet

1

Ich liebe diese Lösung, aber es gibt derzeit einen Fehler in FF (v 31.0, OSX). Wenn Sie das Muster drehen, erscheinen kleine weiße Linien.

Jasongonzales

1

Hallo, ist es möglich, die Hintergrundfarbe des Rechtecks festzulegen, das dieses Muster verwendet?

Yannic Klem

3

@YannicKlem, um eine Hintergrundfarbe festzulegen, fügen Sie <rect x="0" y="0" width="10" height="10" style="fill:skyblue"/>vor dem <line/>.

Medmunds

1

Noch einfacher: Verwenden Sie <rect>statt <line>und machen Sie Ihre Mustergröße 10x1 statt 10x10.

Donquijote

Answer 11

4

Bisher beste Lösung: einfach (keine komplexe Geometrie) und flexibel (jeder Drehwinkel kann eingestellt werden und das widthMusterattribut legt den Abstand zwischen den Streifen fest). Um es noch einfacher zu machen, würde ich <line x1="0" y1="0" x2="0" y2="2" style="stroke:black; stroke-width:1" />anstelle von verwenden <g>...</g>.

David Bonnet

Answer 12

1

Ich liebe diese Lösung, aber es gibt derzeit einen Fehler in FF (v 31.0, OSX). Wenn Sie das Muster drehen, erscheinen kleine weiße Linien.

Jasongonzales

Answer 13

1

Hallo, ist es möglich, die Hintergrundfarbe des Rechtecks festzulegen, das dieses Muster verwendet?

Yannic Klem

Answer 14

3

@YannicKlem, um eine Hintergrundfarbe festzulegen, fügen Sie <rect x="0" y="0" width="10" height="10" style="fill:skyblue"/>vor dem <line/>.

Medmunds

Answer 15

1

Noch einfacher: Verwenden Sie <rect>statt <line>und machen Sie Ihre Mustergröße 10x1 statt 10x10.

Donquijote

Answer 16

Möglicherweise können Sie mithilfe eines <pattern>Tags erstellen, was Sie möchten .

Als Ausgangspunkt können Sie dieses Beispiel des jeweiligen MDN-Dokuments nehmen :

    <?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>

Erweitern Sie das Snippet

Answer 17

1

Vielen Dank. Mir fehlte patternUnits = "userSpaceOnUse". Ohne sie erschien mein Muster überhaupt nicht.

Paul Chernoch

Answer 18

Dieser Code von http://bl.ocks.org/jfsiii/7772281 scheint sehr sauber und wiederverwendbar zu sein:

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>

Erweitern Sie das Snippet

Answer 19

Ein Problem beim Zeichnen einer diagonalen Linie innerhalb eines Musters besteht darin, dass beim Kacheln des Musters die Linien nicht immer ausgerichtet sind - insbesondere bei hohen Zooms. (Dies hängt von der SVG-Rendering-Engine ab, die Sie gerade verwenden.) Die obige Antwort von @ Ingo versucht, dieses Problem zu lösen, indem die Dreiecke oben links und unten rechts gezeichnet werden. Bei Verwendung einiger Rendering-Engines und hoher Zooms sieht es jedoch nicht immer am besten aus. Manchmal sieht die Linie auch so aus ein bisschen wie eine Reihe von Würstchen.

Ein anderer Ansatz besteht darin, eine horizontale Linie in das Muster zu zeichnen und das Muster zu drehen, z

  <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)"/>

Answer 20

1

+1 von mir, ich fand, wenn ich nicht das svg-Namespace-Präfix verwendete, das ich brauchte, um sicherzustellen, dass ich <patter> anstelle von <svg: pattern> verwendete

Alex KeySmith

Answer 21

Diese beiden Ressourcen sind sehr hilfreich: https://bocoup.com/weblog/using-svg-patterns-as-fills https://github.com/iros/patternfills/blob/master/public/patterns.css

Zum Beispiel:

<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>

Answer 22

Dies ist eine Lösung für diagonale Linien mit Kreis im Muster. Sie können den Winkel gemäß Ihren Anforderungen ändern.

<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>

Answer 23

Das hat sehr gut funktioniert und war einfach zu bearbeiten. Gibt es eine Möglichkeit, eine zweifarbige Schraffur durchzuführen? Z.B. mit einer Primärstreifenfarbe und einer Hintergrundfarbe?

Edward

Answer 24

Ich habe es mit diesem Beispiel versucht. Hoffentlich kann es Ihnen viel helfen.

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title>SVG colored patterns via mask</title>
  </head>
  <body>
    <svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <pattern id="stripes" viewBox="0,0,8,8" width="16" height="16" patternUnits="userSpaceOnUse">
          <polygon points="0,0 4,0 0,4" fill="yellow"></polygon>
          <polygon points="0,8 8,0 8,4 4,8" fill="yellow"></polygon>
          <polygon points="0,4 0,8 8,0 4,0" fill="green"></polygon>
          <polygon points="4,8 8,8 8,4" fill="green"></polygon>
        </pattern>
      </defs>
	  <rect fill="url(#stripes)" x="150" y="20" width="100" height="50" />
      <circle cx="50"  cy="50" r="50" fill="url(#stripes)"/>
    </svg>
  </body>
</html>

Erweitern Sie das Snippet

Grüße, Vu Phan

Answer 25

1

SVG 2 hat speziell für diesen Zweck eine hatchEntität . Aus dem Beispielabschnitt dieser Seite:

<hatch hatchUnits="userSpaceOnUse" pitch="5" rotate="135">
  <hatchpath stroke="#a080ff" stroke-width="2"/>
</hatch>

Dies ist eine sehr einfach zu konfigurierende Methode zum Erstellen von Luken:

Darüber hinaus kann der Schraffurpfad auch angepasst werden:

<hatchpath stroke-width="1" d="C 0,4 8,6 8,10 8,14 0,16 0,20"/>

Bitmaske
quelle

Nun, aber niemand hat es tatsächlich implementiert, oder?

Robert Longson

@RobertLongson Nun, ich benutze meistens svg als Zwischenformat und kompiliere es als PDF (ich benutze zum Beispiel inkscape als Compiler). Und inkscape implementiert es sicherlich, obwohl es solchen Code möglicherweise nicht alleine ausgibt. Sie haben Recht, dass Firefox Schraffuren nicht korrekt implementiert. Ich weiß nichts über andere Browser.

Bitmaske

Answer 26

Nun, aber niemand hat es tatsächlich implementiert, oder?

Robert Longson

Answer 27

@RobertLongson Nun, ich benutze meistens svg als Zwischenformat und kompiliere es als PDF (ich benutze zum Beispiel inkscape als Compiler). Und inkscape implementiert es sicherlich, obwohl es solchen Code möglicherweise nicht alleine ausgibt. Sie haben Recht, dass Firefox Schraffuren nicht korrekt implementiert. Ich weiß nichts über andere Browser.

Bitmaske

Answer 28

Für React Native kann diese Komponente verwendet werden, um Hintergrundlinienmuster zu erstellen. Sie sollten Ihrem Projekt react-native-svg hinzufügen

import PropTypes from 'prop-types';
import React, { PureComponent } from "react";
import { View } from "react-native";
import Svg, { Defs, Line, Pattern, Rect } from 'react-native-svg';

export default class PatternLineView extends PureComponent {

  static propTypes = {
    pattern: PropTypes.func.isRequired,
    space: PropTypes.number,
    backgroundColor: PropTypes.string,
    lineColor: PropTypes.string,
    lineWidth: PropTypes.number,
    rotation: PropTypes.number
  }

  static defaultProps = {
    pattern: () => { },
    space: 8,
    lineColor: "#D2D9E5",
    lineWidth: 3,
    rotation: 45
  }

  render() {
    const transform = `rotate(${this.props.rotation})`
    return <View style={{
      flex: 1,
      flexDirection: "row",
      height: "100%",
      width: "100%",
      position: "absolute",
      top: 0,
      start: 0,
      backgroundColor: this.props.backgroundColor
    }}>
      <Svg width="100%" height="100%">
        <Defs>
          <Pattern
            id="linePattern"
            patternUnits="userSpaceOnUse"
            patternTransform={transform}
            width={this.props.space}
            height={this.props.space}>
            <Line
              x1="0"
              y1="0"
              x2="0"
              y2="100%"
              stroke={this.props.lineColor}
              strokeWidth={this.props.lineWidth}
            />
          </Pattern>
        </Defs>

        <Rect
          fill="url(#linePattern)"
          x="0"
          y="0"
          width="100%"
          height="100%"
        />
      </Svg>
    </View>
  }
}

Answer 29

Ich habe Ingos Antwort hier angepasst .

<defs>
    <pattern id="diagonalHatch" patternUnits="userSpaceOnUse" width="4" height="4">
        <!-- background -->
        <path id="background"
            d="M-1,3 L3,-1
               M1,5 L5,1" style="stroke:pink; stroke-width:10" />
        <!-- hatches -->
        <path id="hatches"
            d="M-2,2 L2,-2
               M0,4 L4,0
               M2,6 L6,2" style="stroke:red; stroke-width:1" />
    </pattern>
</defs>

Dieses Muster enthält zwei Pfade, einen für den Hintergrund und einen für die Schraffuren. Die Hintergrundfarbe ist gegenüber JS adressierbar, z. B.:

const hatchPath = document.querySelector("path#hatches");

hatchPath.setAttribute('style', "stroke:blue; stroke-width:1")

Der Hintergrundpfad ist absichtlich zu breit, sodass kein Teil des Musters zumindest vom Hintergrund abgedeckt wird. In der Zwischenzeit kann die Breite der Luken angepasst werden, um die Dicke der Linien zu ändern.

Einfaches Füllmuster in SVG: diagonale Schraffur

Antworten: