Question

我找到了一些很酷的SVG代码 from ，并开始尝试。现在，我清除了大部分随机代码，但是现在我想在灰色块上添加图像，但似乎无法使其正常工作。我已经尝试了StackOverflow的一些技巧，例如向其添加随机类并在代码中创建额外的ID，但仍然无法使用。我想创建类似 this 的东西。

.slide {
      position: relative;
      padding: 8% 0;
    }
    
    .slide__image svg {
      display: block;
      width: 100%;
      max-width: 560px;
      margin: auto;
    }
    .slide__bg {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: -1;
    }

         <svg>
              <g id="p">
                <path opacity=".2" d="M0 2h252s-3.3 40.7-2.7 128.3C249 216 252 272 252 272s-88-2-124.3- 
    2C91.3 270 0 272 0 272V0z"/>
                <path fill="#f4f3f1" d="M0 0h248v270H0z"/>
                <path fill="#4f5150" d="M8 10h233v203H8z"/>
              </g>
              <g id="polaroid">
                <use xlink:href="#p" transform="rotate(15)" x="175" y="50"/>
                <use xlink:href="#p" transform="rotate(-5)" x="5" y="25"/>
              </g>
          </svg>

感谢您查看问题！

将图像添加到SVG路径

0 个答案: