你好，我是 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="">但是，我要像這樣（這是編輯照片時使用的油漆，如果你不明白這個遺憾，并問我試著更好）。
謝謝...
uj5u.com熱心網友回復：
最簡單的解決方案是將影像移動到 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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/407434.html
標籤：