Question

我在svg中有图像。

图像中的每个<circle cx="30%" cy="30%" r="40px" style="transform-origin: 30% 30%" class="shape" />重置部分（开始时被黑色背景隐藏）。

如何用img或div或iframe或Web组件等其他标签替换图片标签，并且在其下方仍然具有相同的行为？

例如，我想拥有<img src="https://source.unsplash.com/random/2">，但没有图像标签。或<my-awesome-img src="https://source.unsplash.com/random/2">，以使用组件样式和更多样式呈现图像。

.some { height:100vh;width:100vw;}

.object-fit_contain {
  object-fit: contain;
}
.full-height {
  height: 100%;
  background: #f8f8f8;
}
.full-height.two {
  background: #acacac;
}
.full-height.three {
  background: #5e5e5e;
}
.ex-wrapper {
  position: relative;
  height: 100vh;
  width: 100vw;
  .ex-peephole {
    position: absolute;
    width: 70px;
    height: 70px;
    border-radius: 50%;
  }
}

@keyframes shapeTransition {
  from {
    transform: scale(0.2);
  }
  to {
    transform: scale(1);
  }
}
.shape {
  animation-duration: 1s;
  animation-name: shapeTransition;
}
@keyframes fullImageTransition {
  from {
    transform: scale(0.2);
  }
  to {
    transform: scale(1);
  }
}
.rect {
  animation-duration: 2s;
  animation-name: fullImageTransition;
  transform-origin: 0px 0px;
}

<div class="some">
<svg style="background: black" fill="black" class="button" expanded="true" height="100%" width="100%">
   <defs>
     <clipPath ref="clipPath" id="theClipPath_1">
       <circle cx="30%" cy="30%" r="40px" style="transform-origin: 30% 30%" class="shape" />
       
     </clipPath>
   </defs>
   <g clip-path="url(#theClipPath_1)">
     <rect width="100%" height="100%" style="fill:rgb(255,255,255)" />
     <image
            preserveAspectRatio="xMinYMin slice"
            class="kid clipPathReveal"
            style="stroke-width: 0px; "
            href="https://source.unsplash.com/random/2"
            x="0"
            y="0"
            width="100%"
            height="100%"
            />
   </g>
</svg>
</div>

我希望svg看起来像这样：（我也尝试将绝对位置，并将div放到svg之外-但不起作用。）

<svg style="background: black" fill="black" class="button" expanded="true" height="100%" width="100%">
   <defs>
     <clipPath ref="clipPath" id="theClipPath_1">
       <circle cx="30%" cy="30%" r="40px" style="transform-origin: 30% 30%" class="shape" />

     </clipPath>
   </defs>
   <g clip-path="url(#theClipPath_1)">
     <rect width="100%" height="100%" style="fill:rgb(255,255,255)" />
     <div style="background:red;">blablabla</div>
   </g>
</svg>

Answer 1

SVG内容基于命名空间呈现，在未指定任何内容的情况下默认为XML。

要想在SVG标记内显示html内容，您需要将html代码包装在<foreignObject>标记内。 ForeignObject标记允许嵌入各种标记，而不仅仅是HTML。这意味着，必须有一种确定使用哪种语言的方法。这就是名称空间发挥作用的地方。

要告诉SVG它是哪种foreignObject，必须将内容放在适当的名称空间中。根据您的代码，一个合适的示例如下所示：

<svg style="background: black" fill="black" class="button" 
 expanded="true" height="100%" width="100%">
  <defs>
    <clipPath ref="clipPath" id="theClipPath_1">
     <circle cx="30%" cy="30%" r="40px" style="transform-origin: 30% 30%" class="shape" />
    </clipPath>
 </defs>
 <g clip-path="url(#theClipPath_1)">
  <rect width="100%" height="100%" style="fill:rgb(255,255,255)" />
  <foreignObject x="40" y="40" width="100" height="100">
  <img src="https://source.unsplash.com/random/2" 
  xmlns="http://www.w3.org/1999/xhtml" width="100%" height="100%"/>
  </foreignObject>
 </g>
</svg>

如何将图像标签更改为SVG中的另一个标签？

1 个答案: