主页 / 问题 / 1144100
Accepted
Leks
Asked:2020-06-22 10:14:04 +0000 UTC2020-06-22 10:14:04 +0000 UTC

为什么 clipPath 不适用于图像？

  • 772

<svg width='400' height='400' style='border: 1px solid black'>
<defs>
   <clipPath  id='a'>
      <circle r="30" cy="100" r="90" />
  </clipPath >
</defs>  
  <image x="15%" y="35" width="250" height="250"
      clip-path="url(#a)" xlink:href="https://ibb.co/T0yn3RX"/>
</svg>

svg

2 个回答

  1. Best Answer

    未指定 circle 属性cx

    并且需要图片的地址https://i.ibb.co/1XcpWKV/0E5BJ.png

    <svg width='400' height='400' style='border: 1px solid black'>
<defs>
   <clipPath  id='a'>
      <circle cx="90" cy="100" r="90" />
  </clipPath >
</defs>  
  <image x="15%" y="35" width="250" height="250"
      clip-path="url(#a)" xlink:href="https://i.ibb.co/1XcpWKV/0E5BJ.png"/>
</svg>

    • 4

  2. 我相信因为它是深夜，你而不是“cx”为圈子放了第二次“r”

    <svg width='400' height='400' style='border: 1px solid black'>
<defs>
   <clipPath  id='a'>
      <circle r="90" cy="100" cx="90" />
  </clipPath >
</defs>  
  <image x="15%" y="35" width="250" height="250"
      clip-path="url(#a)" xlink:href="https://ibb.co/T0yn3RX"/>
</svg>

    PS：而且图片的路径不是指向图片，而是指向网页..

    • 3

相关问题