如何使用 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="">

但我想要这样（这是使用油漆编辑照片，如果您对此不理解，请向我道歉，我会努力做得更好）。

谢谢...

Answer 1

使用 SVG 标签中的<image>标签来放置它。

取自https://www.w3schools.com/graphics/svg_reference.asp 。

Answer 2

最简单的解决方案是将图像移动到 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>