如何使用 HTML 和 CSS 将图像放入 SVG 圆角六边形？答案

【问题标题】：How to put an image in SVG rounded corner hexagon using HTML and CSS?如何使用 HTML 和 CSS 将图像放入 SVG 圆角六边形？
【发布时间】：2021-02-15 21:47:27
【问题描述】：

我正在尝试使用 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, 255, 0.5);
            }
        </style>
    </defs>
    <path class="a" d="M172.871,0a28.906,28.906,0,0,1,25.009,14.412L245.805,97.1a28.906,28.906,0,0,1,0,28.989L197.88,208.784A28.906,28.906,0,0,1,172.871,223.2H76.831a28.906,28.906,0,0,1-25.009-14.412L3.9,126.092A28.906,28.906,0,0,1,3.9,97.1L51.821,14.412A28.906,28.906,0,0,1,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, 255, 255, 0.5);
                    }
                </style>
                <clipPath id="image">
                    <path class="a"
                        d="M172.871,0a28.906,28.906,0,0,1,25.009,14.412L245.805,97.1a28.906,28.906,0,0,1,0,28.989L197.88,208.784A28.906,28.906,0,0,1,172.871,223.2H76.831a28.906,28.906,0,0,1-25.009-14.412L3.9,126.092A28.906,28.906,0,0,1,3.9,97.1L51.821,14.412A28.906,28.906,0,0,1,76.831,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：外芯和透明层必须圆角。

任何帮助/建议都会非常有帮助。谢谢。

【问题讨论】：

标签： html image svg stroke

【解决方案1】：

将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, 255, 0.5);
      }
    </style>
    <clipPath id="image">
      <path transform="translate(111.598) rotate(30)" d="M172.871,0a28.906,28.906,0,0,1,25.009,14.412L245.805,97.1a28.906,28.906,0,0,1,0,28.989L197.88,208.784A28.906,28.906,0,0,1,172.871,223.2H76.831a28.906,28.906,0,0,1-25.009-14.412L3.9,126.092A28.906,28.906,0,0,1,3.9,97.1L51.821,14.412A28.906,28.906,0,0,1,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,0a28.906,28.906,0,0,1,25.009,14.412L245.805,97.1a28.906,28.906,0,0,1,0,28.989L197.88,208.784A28.906,28.906,0,0,1,172.871,223.2H76.831a28.906,28.906,0,0,1-25.009-14.412L3.9,126.092A28.906,28.906,0,0,1,3.9,97.1L51.821,14.412A28.906,28.906,0,0,1,76.831,0Z" transform="translate(111.598) rotate(30)"/>
</svg>

【讨论】：

fill="none" 比透明好。
@AnuragSrivastava 嘿，感谢您的帮助。太棒了。还有一个队列：当我增加描边宽度时，透明层上的曲线变成了一个尖角。增加笔画宽度时如何保持圆润？

【解决方案2】：

@Vishal Bhatt 上的 cmets

另一个队列：当我增加笔画宽度时，透明层变成尖角。我怎样才能保持圆润什么时候增加笔画宽度？

将帮助解决问题 - stroke-linejoin:round;

使用65px 的宽笔画，同时保持笔画的内圆角

对于解决方案而不是剪辑路径，可以尝试使用蒙版：

<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, 255, 255, 0.5);
        stroke-linejoin:round;
      }
    </style>
    <mask id="msk"> 
    
      <path class="a"   transform="translate(111.598) rotate(30)" d="M172.871,0a28.906,28.906,0,0,1,25.009,14.412L245.805,97.1a28.906,28.906,0,0,1,0,28.989L197.88,208.784A28.906,28.906,0,0,1,172.871,223.2H76.831a28.906,28.906,0,0,1-25.009-14.412L3.9,126.092A28.906,28.906,0,0,1,3.9,97.1L51.821,14.412A28.906,28.906,0,0,1,76.831,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, 255, 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,0a28.906,28.906,0,0,1,25.009,14.412L245.805,97.1a28.906,28.906,0,0,1,0,28.989L197.88,208.784A28.906,28.906,0,0,1,172.871,223.2H76.831a28.906,28.906,0,0,1-25.009-14.412L3.9,126.092A28.906,28.906,0,0,1,3.9,97.1L51.821,14.412A28.906,28.906,0,0,1,76.831,0Z"/>
    </mask>
  </defs>
  <image mask="url(#msk)" height="100%" width="100%" xlink:href="http://placekitten.com/800/800" preserveAspectRatio="xMidYMin slice"></image>
 
</svg>

【讨论】：

这也是一个很好的解决方案，stroke-linejoin 效果很好，但是如何像我的问题中的第一张图像一样旋转它并保持图像笔直？
@VishalBhatt 也就是需要顺时针旋转框架，让图像保持水平？我会考虑一下并添加答案
@AlexandrTT 是的，完全一样。谢谢。
@VishalBhatt 补充了答案

【解决方案3】：

剪辑路径或蒙版存在问题，如果页面上有多个 SVG，它们是否需要具有唯一 ID。

解决此问题的一种方法是创建 SVG 客户端；并为每个剪辑路径生成一个唯一的 id

虽然我们这样做了，但不妨简化一下 Hexagon 路径

包装在自定义元素中（不需要具有该唯一 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>

【讨论】：