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