Простий шаблон заповнення в svg: діагональне штрихування

Question 1

Як би я заповнив форму SVG не одним кольором, зображенням чи градієнтом, а малюнком штрихування, діагональним, якщо це можливо.

Минуло 2 години, а я нічого не знайшов (принаймні після 2005 року).

Я вважаю, що можливим злому буде штрихований PNG, який буде служити заповненням, але це не ідеально.

Question 2

Я також не знайшов нічого для діагонального штрихування в Інтернеті, тому поділюсь своїм рішенням тут:

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

(зверніть увагу на малу літеру "l" у виразі контуру)

Вищезазначене створює люк із діагональними лініями від нижнього лівого до правого верхнього кута, що знаходяться на відстані 4 пікселів. Окрім діагональної лінії ( M0,4 l4,-4), вам також потрібно обвести верхній лівий та нижній правий краї області візерунка, оскільки в іншому випадку лінія буде "звужена" через відсікання там, де вона перетинає краї квадрата.

Приклад зразка після застосування вищезазначених кроків показує, яким зразком він назвав кінцевий продукт

Щоб заповнити прямокутник цим візерунком, виконайте:

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

Question 3

Використовуйте атрибут patternTransform, щоб повернути вертикальний (або горизонтальний) відрізок лінії. Цей метод безперешкодно викладає плитки та використовує найпростіший можливий шлях. Атрибут pattern widthвизначає, наскільки близькі паралельні штрихування.

<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

Можливо, ви зможете створити те, що хочете, за допомогою <pattern>тегу.

Як вихідну точку ви можете взяти цей приклад відповідного документа MDN :

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

Розгорніть фрагмент

Question 5

Цей код з http://bl.ocks.org/jfsiii/7772281 видається дуже чистим і багаторазовим:

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>

Розгорніть фрагмент

Question 6

Однією з проблем малювання діагональної лінії у візерунку є те, що коли візерунок викладений плиткою, лінії не завжди вишикуються - особливо при великому масштабуванні. (Це залежить від механізму візуалізації SVG, яким ви випадково користуєтесь). Відповідь @ Інго вище намагається вирішити це, намалювавши трикутники у верхньому лівому та нижньому правому кутах - але знову ж таки, використовуючи деякі механізми візуалізації та велике масштабування, це не завжди виглядає найкраще - і іноді рядок закінчується виглядом трохи схожа на нитку ковбас.

Інший підхід полягає у проведенні горизонтальної лінії на малюнку та обертанні малюнка, наприклад

  <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

Ці два ресурси дуже корисні: https://bocoup.com/weblog/using-svg-patterns-as-fills https://github.com/iros/patternfills/blob/master/public/patterns.css

Наприклад:

<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

Це рішення для діагональних ліній з використанням кола в шаблоні. Ви можете змінити кут нахилу відповідно до ваших вимог.

<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

Я спробував із цим зразком. Сподіваємось, це може вам дуже допомогти.

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

Розгорніть фрагмент

З повагою, Ву Фан

Question 10

SVG 2 має hatchсутність для цієї мети. З прикладу розділу цієї сторінки:

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

Це дуже легко налаштовуваний спосіб створення люків:

Крім того, шлях штрихування також можна налаштувати:

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

Question 11

Для React Native можна використовувати цей компонент для створення шаблону фонових ліній. Ви повинні додати до свого проекту response-native-svg

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

Я адаптував відповідь Інго тут .

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

Цей шаблон включає два шляхи, один для фону, а інший для люків. Колір фону можна адресувати проти JS, наприклад:

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

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

Шлях до фону навмисне надто широкий, так що жодна частина візерунка не принаймні покрита фоном. Тим часом ширина люків може бути налаштована, щоб змінити товщину ліній.