Html svg clipPath 使用绝对点而不是百分比

发布于07月06日

我想用clipPath来表示我试图在网页上显示的图像，我想用百分比代替polygon的绝对值.我曾try 将viewBox属性添加到svg元素中(此处建议为SVG polygon points with percentage units support)，但当图像渲染时，似乎仍在使用绝对点.我的html设置如下:

<img class="clip-svg" src="{% static 'myApp/images/random.png' %}">

<div id="svg-container" style="width:100%; height:100%;">
  <svg width='100%' height='100%' viewBox="0 0 100 100">
   <defs>
    <clipPath id="myClip">
      <polygon points="89,0 100,50 89,100 71,100 83,50 69,0"/>
      <polygon points="53,0 75,50 59,100 48,100 64,50 41,0" />
    </clipPath>
   </defs>
  </svg>
</div>

CSS为:

.clip-svg {
  clip-path: url(#myClip);
}

仅使用CSS剪辑路径(没有svg)我就有:

clip-path: polygon(89% 0, 100% 50%, 89% 100%, 71% 100%, 83% 50%, 69% 0);
clip-path: polygon(53% 0, 75% 50%, 59% 100%, 48% 100%, 64% 50%, 41% 0);

当我使用CSS clip-path样式时，剪辑显示正确，我一次只能显示一个，我想同时显示两个.我读过的所有其他类似问题都是说使用我已经做过的viewBox属性，所以我不知道出了什么问题.

<img class="clip-svg" src="https://assets.codepen.io/222579/castell.jpg" /> <svg viewBox="0 0 100 100" width="0" height="0"> <clipPath id="myClip" clipPathUnits="objectBoundingBox"> <polygon transform="scale(.01)" points="89,0 100,50 89,100 71,100 83,50 69,0" /> <polygon transform="scale(.01)" points="53,0 75,50 59,100 48,100 64,50 41,0" /> </clipPath> </svg>

Html svg clipPath 使用绝对点而不是百分比

推荐答案

Html相关问答推荐

防止滚动的内容显示在表的边框中

当ul为Flex时，使ul元素在指定高度内可垂直滚动

后续使用收件箱从网页表中提取值

D3.js—分组条形图—更新输入数据时出错

垂直页眉，每行只显示一个使用css的字母

Angular /HTML5不会播放本地文件夹中的音频mpeg

容器内的SVG图像没有响应

在Chrome中使用手写笔时，滚动条方向反转

有没有一种方法可以动态地从网格或Flexbox中取出HTML元素？

如果浏览器通过http接收html，为什么客户端内置表单验证不起作用？

如何生成随机字符串的字母数字字符集长度到html跨度？

一切停止工作后，添加不透明度(在tailwind )

在R中从网页上的特定iframe中提取图形数据

柔性盒内的物品；t覆盖整个宽度，即使设置为100%

如何在没有包装元素的情况下在React(Next.js)中呈现HTML注释

水平填充容器内的空间

高度大于页面高度和页面大于覆盖的 CSS 覆盖

如何在滚动行中显示一张图片和下一张图片的一半？

我正在使用 react-router-dom 并创建了一个固定的导航栏，它在每个网页上不断改变大小，我不知道为什么

另一个 flex 元素之间的 CSS 空间