Question

我如何填充SVG形状，而不是单色，图像或渐变，但如果可能的话，使用阴影图案，对角线。

已经过了2个小时，我什么也没找到（至少在2005年之后）。

我认为可能的黑客将是一个阴影的PNG，可以作为填充，但这并不理想。

Answer 1

我也没有在互联网上找到任何对角线阴影线，所以我会在这里分享我的解决方案：

<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）旁边，您还必须描绘图案区域的左上边缘和右下边缘，因为否则线条会因为与正方形边缘相交的剪裁而“收缩”。

Example of a pattern after applying the above steps, it shows how the pattern it titled to make the end product

要使用此图案填充矩形，请执行以下操作：

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

Answer 2

使用patternTransform属性旋转垂直（或水平）线段。此方法无缝切片并使用最简单的路径。模式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>

Answer 3

您可以使用<pattern>标记创建所需内容。

作为起点，您可以采用the respective MDN docu：

的示例

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

Answer 4

来自http://bl.ocks.org/jfsiii/7772281的此代码似乎非常干净且可重复使用：

＆＃13;

svg {
  width: 500px;
  height: 500px;
}

rect.hbar {
  mask: url(#mask-stripe)
}

.thing-1 {
  fill: blue;
}


.thing-2 {
  fill: green;
}

＆＃13;

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

＆＃13;

Answer 5

在图案中绘制对角线的一个问题是，当图案平铺时，线条不会总是对齐 - 尤其是在高变焦时。（这取决于您碰巧使用的SVG渲染引擎）。 @ Ingo上面的回答试图通过在左上角和右下角绘制三角形来解决这个问题 - 但是，再次使用一些渲染引擎和高变焦，它并不总是看起来最好 - 有时线条最终会看起来有点像一串香肠。

另一种方法是在图案中绘制一条水平线并旋转图案，例如

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

这两个资源非常有用： 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>

Answer 7

这是使用圆形图案的对角线的解决方案。您可以根据自己的要求更改角度。

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

SVG 2为此专门具有hatch entity。在该页面的示例部分：

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

这是一种非常容易配置的创建图案填充的方法：

此外，还可以自定义hatch path：

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

Answer 9

我尝试过此示例。希望它能对您有所帮助。

关于，武潘

Answer 10

对于React Native而言，可以使用此组件来制作背景线条图案。您应该将react-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>
  }
}

Answer 11

我改编了Ingo's answer here。

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

背景路径故意过宽，因此模式的任何部分都不会至少被背景覆盖。同时，可以调整舱口的宽度以更改线条的粗细。

svg中的简单填充图案：对角线阴影线

11 个答案: