如何使用 css 在 SVG 中设置我的图像？

Question

你好，我是 Web 开发的新手。

我希望在 SVG 中正确设置我的图像，但遇到了我无法做到这一点的问题，我在 stackoverflow 中提出了很多问题，但这些问题不是我问的类型。

听我的代码

.home__data{
  background-color: red;
}
.home__data  svg{
  height: 509px;
  width: 534px;
  position: absolute;
  top: 150px;
  right: -44px;
  z-index: 1000;
  
}
.home__data  svg path{
  fill: none;fill-opacity:1;stroke:#1a1a1a;stroke-width:2px;stroke-opacity:1;
  
}

img{
  position: absolute;
right: 65px;
top: 201px;
height: 330px;
width: 374px;
}

<div class="home__data">
            <svg viewBox="0 0 200 200" height="200px" width="300px" xmlns="http://www.w3.org/2000/svg">
                <path fill="#fff"
                    d="M48.9,-42.4C60.8,-24.1,66.1,-3.9,60.7,11.5C55.3,26.8,39.2,37.4,22.9,43.8C6.6,50.2,-9.9,52.5,-29.8,48.2C-49.8,43.8,-73.2,32.9,-81.3,13.8C-89.5,-5.3,-82.4,-32.7,-66.3,-51.9C-50.2,-71.1,-25.1,-82.2,-3.3,-79.6C18.5,-76.9,37,-60.6,48.9,-42.4Z"
                    transform="translate(100 100)" /> 
            </svg>
            
        </div>
        <img src="https://img.freepik.com/free-photo/young-handsome-man-with-beard-isolated-keeping-arms-crossed-frontal-position_1368-132662.jpg?size=626&ext=jpg" alt="">

但我想要this（这是用油漆编辑照片，如果你不明白，请原谅我，我会努力做得更好）。

谢谢你...

Answer 1

最简单的解决方案是将图像移动到 SVG 中。然后使用 SVG <clipPath> 将其剪辑到您的框架形状。

为了简化 SVG，以下是我所做的：

• 由于框架和剪切路径是同一个形状，我把<path>放到了一个<defs>（定义）块中，这样使用它的两个地方就可以共享路径定义了。我们使用 SVG <use> 元素来引用路径。
• 我更新了viewBox 使其适合框架形状。并调整坐标和变换以适应。现在 SVG 可以放置在页面上您想要的任何位置，而无需担心意外的填充等。

.home__data{
  background-color: red;
}
.home__data  svg{
  height: 509px;
  width: 534px;
  position: absolute;
  top: 150px;
  right: -44px;
  z-index: 1000;
  
}
.home__data svg .frame{
  fill: none;
  fill-opacity:1;
  stroke:#1a1a1a;
  stroke-width:2px;
  stroke-opacity:1;
}

svg{
  display: block;
  position: absolute;
  right: 65px;
  top: 201px;
  width: 374px;
}

<div class="home__data">
  <svg viewBox="0 0 148 131">
    <defs>
      <!-- Shared path definition for both the clip path and the rendered frame -->
      <path id="frame-path"
            d="M48.9,-42.4C60.8,-24.1,66.1,-3.9,60.7,11.5C55.3,26.8,39.2,37.4,22.9,43.8C6.6,50.2,-9.9,52.5,-29.8,48.2C-49.8,43.8,-73.2,32.9,-81.3,13.8C-89.5,-5.3,-82.4,-32.7,-66.3,-51.9C-50.2,-71.1,-25.1,-82.2,-3.3,-79.6C18.5,-76.9,37,-60.6,48.9,-42.4Z"
            transform="translate(85 80)" /> 
      
      <!-- Clipping path used to trim unwanted parts of the image -->
      <clipPath id="frame-clip">
        <use xlink:href="#frame-path"/>
      </clipPath>
    </defs>

    <!-- Draw the image clipped to the frame shape -->
    <image xlink:href="https://img.freepik.com/free-photo/young-handsome-man-with-beard-isolated-keeping-arms-crossed-frontal-position_1368-132662.jpg?size=626&ext=jpg"
           x="0" y="0" width="148" height="131"
           preserveAspectRatio="xMidYMid slice"
           clip-path="url(#frame-clip)"/>

    <!-- Draw the frame on top of the image -->
    <use xlink:href="#frame-path" class="frame"/>
  </svg>
            
</div>