如何解决如何使用 HTML 和 CSS 将图像放入 SVG 圆角六边形中？
我正在尝试使用 SVG 实现如下所示的效果：
我已经尝试了这个平台的许多解决方案，到目前为止，我已经做到了：
<svg xmlns="http://www.w3.org/2000/svg" width="327.846" height="318.144" viewBox="0 0 327.846 318.144">
<defs>
<style>
.a {
fill:#000;
stroke-width: 25px;
stroke: rgba(255,255,0.5);
}
</style>
</defs>
<path class="a" d="M172.871,0a28.906,28.906,1,25.009,14.412L245.805,97.1a28.906,28.989L197.88,208.784A28.906,172.871,223.2H76.831a28.906,1-25.009-14.412L3.9,126.092A28.906,3.9,97.1L51.821,14.412A28.906,76.831,0Z" transform="translate(111.598) rotate(30)"/>
</svg>使用上面的代码，我可以添加笔触但不能添加图像。对于下面的代码，我可以添加图像但没有出现笔划：
<svg xmlns="http://www.w3.org/2000/svg" width="327.846" height="318.144" viewBox="0 0 327.846 318.144">
<defs>
<style>
.a {
fill: #000;
stroke-width: 25px;
stroke: rgba(255,0.5);
}
</style>
<clipPath id="image">
<path class="a"
d="M172.871,0Z"
transform="translate(111.598) rotate(30)" />
</clipPath>
</defs>
<image clip-path="url(#image)" height="100%" width="100%" xlink:href="http://placekitten.com/800/800"
preserveAspectRatio="xMidYMin slice"></image>
</svg>我缺少什么才能让两者都加入？
PS：外芯和透明层必须要有圆角。
任何帮助/建议都会非常有帮助。谢谢。
解决方法
为 fill: transparent 设置 fill: none / path 并再次使用它，作为 svg 的孩子
<svg xmlns="http://www.w3.org/2000/svg" width="327.846" height="318.144" viewBox="0 0 327.846 318.144">
<defs>
<style>
.a {
fill: none;
stroke-width: 25px;
stroke: rgba(255,255,0.5);
}
</style>
<clipPath id="image">
<path transform="translate(111.598) rotate(30)" d="M172.871,0a28.906,28.906,1,25.009,14.412L245.805,97.1a28.906,28.989L197.88,208.784A28.906,172.871,223.2H76.831a28.906,1-25.009-14.412L3.9,126.092A28.906,3.9,97.1L51.821,14.412A28.906,76.831,0Z"/>
</clipPath>
</defs>
<image clip-path="url(#image)" height="100%" width="100%" xlink:href="http://placekitten.com/800/800" preserveAspectRatio="xMidYMin slice"></image>
<path class="a" d="M172.871,0Z" transform="translate(111.598) rotate(30)"/>
</svg>对@Vishal Bhatt 的评论
多一个队列：当我增加笔划宽度时， 透明层变成尖角。我怎样才能保持圆形 当增加笔画宽度时？
将有助于解决问题 - stroke-linejoin:round;
使用了 65px 的宽笔画，同时保持笔画的内部圆润
对于替代 clip-Path 的解决方案，可以尝试使用掩码：
<svg xmlns="http://www.w3.org/2000/svg" width="327.846" height="318.144" viewBox="0 0 327.846 318.144">
<defs>
<style>
.a {
fill:white;
stroke-width: 65px;
stroke: rgba(255,0.5);
stroke-linejoin:round;
}
</style>
<mask id="msk">
<path class="a" transform="translate(111.598) rotate(30)" d="M172.871,0Z"/>
</mask>
</defs>
<image mask="url(#msk)" height="100%" width="100%" xlink:href="http://placekitten.com/800/800" preserveAspectRatio="xMidYMin slice"></image>
</svg>更新
六边形旋转命令
transform="rotate(15 124.5 111.5)"，这里
15 - 旋转角度
124.5 111.5 - 六边形旋转中心坐标
<svg xmlns="http://www.w3.org/2000/svg" width="327.846" height="318.144" viewBox="0 0 327.846 318.144">
<defs>
<style>
.a {
fill:white;
stroke-width: 45px;
stroke: rgba(255,0.5);
stroke-linejoin:round;
}
</style>
<mask id="msk">
<path class="a" transform="translate(50 50) rotate(15 124.5 111.5)" d="M172.871,0Z"/>
</mask>
</defs>
<image mask="url(#msk)" height="100%" width="100%" xlink:href="http://placekitten.com/800/800" preserveAspectRatio="xMidYMin slice"></image>
</svg>剪辑路径或掩码的问题，如果页面上有多个 SVG，它们是否需要具有唯一的 id。
解决这个问题的一种方法是创建 SVG 客户端；并为每个剪辑路径生成一个唯一的 id
虽然我们在做它也可以简化六边形路径
包裹在自定义元素中（该唯一 ID 不需要 shadowDOM）：
<style>
svg {
width: 148px;
background: teal;
}
</style>
<svg-hexed-image ></svg-hexed-image>
<svg-hexed-image src="http://placekitten.com/800/800"></svg-hexed-image>
<svg-hexed-image rotate="30" src="http://placekitten.com/801/801"></svg-hexed-image>
<svg-hexed-image rotate="45" stroke="red" opacity=".5" src="http://placekitten.com/300/300"></svg-hexed-image>
<script>
customElements.define('svg-hexed-image',class extends HTMLElement {
connectedCallback() {
let img = this.getAttribute("src") || "http://placekitten.com/120/120";
let strokewidth = this.getAttribute("stroke-width") || "3";
let opacity = this.getAttribute("opacity") || ".5";
let stroke = this.getAttribute("stroke") || "white";
let rotate = this.getAttribute("rotate") || 0;
let transform = `transform="rotate(${rotate} 23 23)"`;
// make very sure for a unique id:
let id = "id" + btoa(img) + (new Date() / 1);
let d = `M31 3.5a5 5 90 014 3l8 14a5 5 90 010 5l-8 14a5 5 90 01-4 3h-16a5 5 90 01-4-3l-8-14a5 5 90 010-5l8-14a5 5 90 014-3z`;
// now write HTML:
this.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 46 46">
<defs><clipPath id="${id}"><path fill="none" ${transform} d="${d}"></clipPath></defs>
<image clip-path="url(#${id})" height="100%" width="100%" href="${img}"></image>
<path fill="none" stroke="${stroke}" stroke-width="${strokewidth}"
${transform} opacity="${opacity}" d="${d}"/></svg>`;
}
});
</script>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。