Using clip-path on <image> doesn't take affect

[ShenQingchuan]

<svg 
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1200 240" width="1200" height="240"
>
<style>
text {
  font-weight: 300;
  font-size: 12px;
  fill: #777777;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
image {
  border-radius: 50%;
}
.contributor-link {
  cursor: pointer;
}
.contributors-title {
  font-weight: 500;
  font-size: 20px;
}
</style>
<text class="contributors-title" x="600" y="40" text-anchor="middle">Contributors</text>
<a class="contributor-link" xlink:href="https://github.com/Jinjiang" target="_blank" id="Jinjiang">
  <image x="55" y="78" width="50" height="50" xlink:href="https://avatars.githubusercontent.com/u/206848?v=4" clip-path="inset(0% round 100%)" />
<text x="80" y="146" text-anchor="middle" class="contributor-name" fill="currentColor">Jinjiang</text>
</a>
<a class="contributor-link" xlink:href="https://github.com/ShenQingchuan" target="_blank" id="ShenQingchuan">
  <image x="135" y="78" width="50" height="50" xlink:href="https://avatars.githubusercontent.com/u/46062972?v=4" clip-path="inset(0% round 100%)" />
<text x="160" y="146" text-anchor="middle" class="contributor-name" fill="currentColor">ShenQingchuan</text>
</a>
<a class="contributor-link" xlink:href="https://github.com/jCodeLife" target="_blank" id="jCodeLife">
  <image x="215" y="78" width="50" height="50" xlink:href="https://avatars.githubusercontent.com/u/50767049?v=4" clip-path="inset(0% round 100%)" />
<text x="240" y="146" text-anchor="middle" class="contributor-name" fill="currentColor">jCodeLife</text>
</a>
<a class="contributor-link" xlink:href="https://github.com/pakchoily" target="_blank" id="pakchoily">
  <image x="295" y="78" width="50" height="50" xlink:href="https://avatars.githubusercontent.com/u/59410698?v=4" clip-path="inset(0% round 100%)" />
<text x="320" y="146" text-anchor="middle" class="contributor-name" fill="currentColor">pakchoily</text>
</a>
<a class="contributor-link" xlink:href="https://github.com/wxsms" target="_blank" id="wxsms">
  <image x="375" y="78" width="50" height="50" xlink:href="https://avatars.githubusercontent.com/u/5960988?v=4" clip-path="inset(0% round 100%)" />
<text x="400" y="146" text-anchor="middle" class="contributor-name" fill="currentColor">wxsms</text>
</a>
<a class="contributor-link" xlink:href="https://github.com/Yorksh1re" target="_blank" id="Yorksh1re">
  <image x="455" y="78" width="50" height="50" xlink:href="https://avatars.githubusercontent.com/u/70258597?v=4" clip-path="inset(0% round 100%)" />
<text x="480" y="146" text-anchor="middle" class="contributor-name" fill="currentColor">Yorksh1re</text>
</a>
<a class="contributor-link" xlink:href="https://github.com/KiritaniAyaka" target="_blank" id="KiritaniAyaka">
  <image x="535" y="78" width="50" height="50" xlink:href="https://avatars.githubusercontent.com/u/26200808?v=4" clip-path="inset(0% round 100%)" />
<text x="560" y="146" text-anchor="middle" class="contributor-name" fill="currentColor">KiritaniAyaka</text>
</a>
<a class="contributor-link" xlink:href="https://github.com/Matrix53" target="_blank" id="Matrix53">
  <image x="615" y="78" width="50" height="50" xlink:href="https://avatars.githubusercontent.com/u/55696968?v=4" clip-path="inset(0% round 100%)" />
<text x="640" y="146" text-anchor="middle" class="contributor-name" fill="currentColor">Matrix53</text>
</a>
<a class="contributor-link" xlink:href="https://github.com/KimYangOfCat" target="_blank" id="KimYangOfCat">
  <image x="695" y="78" width="50" height="50" xlink:href="https://avatars.githubusercontent.com/u/32960305?v=4" clip-path="inset(0% round 100%)" />
<text x="720" y="146" text-anchor="middle" class="contributor-name" fill="currentColor">KimYangOfCat</text>
</a>
<a class="contributor-link" xlink:href="https://github.com/earthaYan" target="_blank" id="earthaYan">
  <image x="775" y="78" width="50" height="50" xlink:href="https://avatars.githubusercontent.com/u/25888900?v=4" clip-path="inset(0% round 100%)" />
<text x="800" y="146" text-anchor="middle" class="contributor-name" fill="currentColor">earthaYan</text>
</a>
<a class="contributor-link" xlink:href="https://github.com/SkyeYoung" target="_blank" id="SkyeYoung">
  <image x="855" y="78" width="50" height="50" xlink:href="https://avatars.githubusercontent.com/u/48400568?v=4" clip-path="inset(0% round 100%)" />
<text x="880" y="146" text-anchor="middle" class="contributor-name" fill="currentColor">SkyeYoung</text>
</a>
<a class="contributor-link" xlink:href="https://github.com/byog" target="_blank" id="byog">
  <image x="935" y="78" width="50" height="50" xlink:href="https://avatars.githubusercontent.com/u/7764115?v=4" clip-path="inset(0% round 100%)" />
<text x="960" y="146" text-anchor="middle" class="contributor-name" fill="currentColor">byog</text>
</a>
<a class="contributor-link" xlink:href="https://github.com/wangyan666" target="_blank" id="wangyan666">
  <image x="1015" y="78" width="50" height="50" xlink:href="https://avatars.githubusercontent.com/u/90406579?v=4" clip-path="inset(0% round 100%)" />
<text x="1040" y="146" text-anchor="middle" class="contributor-name" fill="currentColor">wangyan666</text>
</a>
<a class="contributor-link" xlink:href="https://github.com/xfq" target="_blank" id="xfq">
  <image x="1095" y="78" width="50" height="50" xlink:href="https://avatars.githubusercontent.com/u/2863444?v=4" clip-path="inset(0% round 100%)" />
<text x="1120" y="146" text-anchor="middle" class="contributor-name" fill="currentColor">xfq</text>
</a>

</svg>

Render result on the Vercel site

clip-path doesn't make the avatar become circle

[ShenQingchuan]

it seems that <style> doesn't take affect on Vercel site. it can not even display text.

Rendered by resvg.render().asPng()

[yisibl]

1. about clip-path
   clip-path: inset() is a syntax introduced in SVG2, which is not currently implemented in resvg, so you can go resvg upstream and submit an issue.
   But we can do it with the <clipPath> element, something like this:

<svg 
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1200 240" width="1200" height="240"
>
<defs>
  <clipPath id="myClipPath" clipPathUnits="objectBoundingBox">
    <circle cx="0.5" cy=".5" r=".5"/>
  </clipPath>
</defs>
<text class="contributors-title" x="600" y="40" text-anchor="middle">Contributors</text>
<a class="contributor-link" xlink:href="https://github.com/Jinjiang" target="_blank" id="Jinjiang">
  <image x="55" y="78" width="50" height="50" xlink:href="https://avatars.githubusercontent.com/u/206848?v=4" clip-path="url(#myClipPath)" />
<text x="80" y="146" text-anchor="middle" class="contributor-name" fill="currentColor">Jinjiang</text>
</a>
</svg>

2. about text

I haven't tried loading fonts in vercel yet, you can take a look at the solution here, it might help: #101 (comment)

Incidentally, what is your actual usage scenario or project?

[ShenQingchuan]

@yisibl My usage scenario is to create a circle avatar list ~

[ShenQingchuan]

the code snippet you provided just works for me! Thanks a lot!!!!

[yisibl]

@ShenQingchuan Did you solve the font loading problem in vercel?