GatsbyJS - 在 CSS 中使用 SVG 作为伪背景图像

Question

这是我一直在玩弄的东西，但现在我正在盖茨比工作的项目中，我需要一些建议。

我正在尝试将 SVG 用作伪背景图像，但到目前为止无济于事。

SCSS 代码：

 &:after {
    display: block;
    content: "";
    position: absolute;
    background-image: url(../../static/square-hollow-yellow.svg);
    width: 150px;
    height: 150px;
    bottom: -5%;
    right: 50px;
  }

在检查器中查找背景图像源时返回的内容。

url(data:image/svg+xml;base64,Ym9vawAAAABtYXJrAAAAADgAAAA4AAAAsAMAAAAABBAAAAAAVkcAABAHH+wVMcJBAAAAAP9/AADcAgAABAAAAAMDAAAABAAADAAAAAEBAABBcHBsaWNhdGlvbnMEAAAAAQEAAE1BTVAGAAAAAQEAAGh0ZG9jcwAACAAAAAEBAABhbmdlbC12MgoAAAABAQAAd3AtY29udGVudAAABgAAAAEBAAB0aGVtZXMAABQAAAABAQAAYW5nZWwtc3RhcnRlci1tYXN0ZXIGAAAAAQEAAGFzc2V0cwAABAAAAAEBAABzdmdzGAAAAAEBAABzcXVhcmUtaG9sbG93LXllbGxvdy5zdmcoAAAAAQYAABAAAAAkAAAAMAAAAEAAAABQAAAAZAAAAHQAAACQAAAAoAAAAKwAAAAIAAAABAMAAJ4xhQEDAAAACAAAAAQDAAD6RkABAwAAAAgAAAAEAwAAiEw3AAMAAAAIAAAABAMAACAHJQEDAAAACAAAAAQDAAArByUBAwAAAAgAAAAEAwAALAclAQMAAAAIAAAABAMAAOIZJQEDAAAACAAAAAQDAACO/qEBAwAAAAgAAAAEAwAAUgmiAQMAAAAIAAAABAMAAHAJogEDAAAAKAAAAAEGAAD8AAAADAEAABwBAAAsAQAAPAEAAEwBAABcAQAAbAEAAHwBAACMAQAACAAAAAAEAABBwg04Y7pOQRgAAAABAgAAAQAAAAAAAAAfAgAAAAAAAB8CAAAAAAAAAAAAAAEFAAAIAAAAAQkAAGZpbGU6Ly8vDAAAAAEBAABNYWNpbnRvc2ggSEQIAAAABAMAAACwYG50AAAACAAAAAAEAABBwb7mH7hbnSQAAAABAQAAQkQ3NDhGNkItMkM2NC0zOTZELUJENjMtRTcwNDRCMEM3MTZGGAAAAAECAACBAAAAAQAAAO8TAAABAAAA7xMAAAEAAAABAAAAAQEAAC8AAAAzAAAAAQIAAGRuaWIAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAADAAAAAAAAAHN2Zz8/Pz8AAAAAAAAAAADMAAAA/v///wEAAAAAAAAAEAAAAAQQAADMAAAAAAAAAAUQAACcAQAAAAAAABAQAADcAQAAAAAAAEAQAADMAQAAAAAAAAIgAACUAgAAAAAAAAUgAAAEAgAAAAAAABAgAAAUAgAAAAAAABEgAABIAgAAAAAAABIgAAAoAgAAAAAAABMgAAA4AgAAAAAAACAgAAB0AgAAAAAAADAgAAD8AQAAAAAAAAHQAAD8AQAAAAAAABDQAAAEAAAAAAAAABfwAACsAAAAAAAAACLwAACgAgAAAAAAAA==)

任何指针或建议将不胜感激。

更新

项目的文件夹结构

- src
  - components
    - Heros 
      - hero-square.js (file of component)
    - sass
      - main.scss (stylesheet)
  - static
    - sqaure-hollow-yellow.svg (svg file)
  - templates
    - angel-in-action-single.js (where the component is being rendered/called)

Answer 1

另一种解决方法是使用gatsby-plugin-react-svg。使用自定义真的很容易。您只需要处理一些事情，就可以轻松实现您想要的。在你的 gatsby-config.js 中：

plugins: [
  {
    resolve: "gatsby-plugin-react-svg",
    options: {
      rule: {
        include: /assets/ 
      }
    }
  }
]

请记住，/assets/ 只是一个正则表达式，而不是路径本身。如果您想使用另一个文件夹（即：/svg/），您需要将其设置为include: /svg/。不管你的文件夹有多深。

要考虑的另一件事是该文件夹中只有 SVG，并且它们必须有不同的 id（通常导出的 SVG 有一个标准 id，如果它们重复出现，您将无法导入 SVG）。

准备好设置后，只需将 SVG 作为 React 组件导入：

从“./path/assets/icon.svg”导入图标； // 其他代码

return <div>
    <Icon className="myIcon" />
</div>;

您现在可以根据需要定位 SVG 并为其设置样式。如果它在 position: relative 容器内，您可以轻松应用您提供的 ::after 伪选择器的样式。

Answer 2

背景图像可能不在容器的可见区域中。仅使用提供的 sn-p 很难分辨。特别是因为::after 是绝对定位的。

div{
  background-color: red;
  height: 200px;
  position: relative;
  width: 200px
}

div::after{
    background-color: lime;
    display: block;
    content: "";
    position: absolute;
    background-image: url("https://image.flaticon.com/icons/svg/1643/1643587.svg");
    width: 150px;
    height: 150px;
    bottom: -5%;
    right: 50px;
    background-position: 50% 50%
  }

<div></div>

另外请注意，您可以使用background-size 和background-position 来放置背景。您不需要 ::after 就可以了。

div{
  height: 200px;
  position: relative;
  width: 200px;
  
  background-image: url("https://image.flaticon.com/icons/svg/1643/1643587.svg");
  background-repeat: no-repeat;
  background-size: 100%
}

.div1{
  background-color: green;
}

.div2{
  background-color: lime;
  background-size: 150px;
  background-position: -50px -5%;
  background-repeat: no-repeat
}

<div class = "div1"></div>
<div class = "div2"></div>