使用S3托管SVG作为视频mask-image无效果的问题及解决

问题描述 #

• 将SVG作为视频的mask-image属性值时，引用维基百科托管的SVG完全正常，但使用S3托管的自定义SVG时无任何效果
• 涉事SVG单独作为图片显示正常，仅作为遮罩时失效；改用PNG格式也无法解决问题

解决方案 #

通过配置S3存储桶的CORS规则解决了该问题。

涉事SVG代码 #

<svg xmlns="http://www.w3.org/2000/svg" width="367.0846" height="488.5493" viewBox="0 0 367.0846 488.5493">
  <title>just-r</title>
  <g id="Layer_2" data-name="Layer 2">
    <g id="Layer_1-2" data-name="Layer 1">
      <path fill="white" d="M17.0907,488.3145v-9.4038q0-176.6083.1-353.2166a218.0861,218.0861,0,0,0-3.2137-36.4458C10.123,66.2111,6.4577,43.1424,2.71,20.0875,1.9748,15.5631,1.18,11.0481.494,6.5163.2068,4.6183-.478,2.6834.5344.6714,3.009-.3653,5.66.108,8.2378.1066Q87.5314.0607,166.8251.0829c13.3236-.0005,26.6424-.0786,39.9469.9856,24.8959,1.9914,48.6014,8.0336,70.64,20.0669,33.0541,18.0477,54.3258,45.2091,63.5377,81.7761,8.99,35.6843,5.9592,70.1554-10.3562,103.29A114.865,114.865,0,0,1,293.753,249.775c-1.3895.99-2.6923,2.1013-4.199,3.2846.6711,2.2694,1.2191,4.3544,1.9011,6.3948Q328.2966,369.68,365.1164,479.9125c.8677,2.6011,2.6051,5.121,1.727,8.1193-5.5449.6953-148.4555.6948-154.26-.0311-2.7344-8.6063-4.2992-17.6426-6.5339-26.5025-2.2414-8.8868-4.2161-17.8411-6.2935-26.7691-2.028-8.7162-4.0234-17.44-6.06-26.1545q-3.13-13.3891-6.3118-26.7658-3.1626-13.3818-6.3325-26.7617-3.1571-13.3822-6.2925-26.77c-2.0325-8.715-3.9373-17.461-6.0786-26.1489-2.1808-8.8475-3.914-17.8178-6.8022-27.7145-.8948,1.7463-1.4712,2.3858-1.5237,3.0656-.151,1.9555-.1092,3.9272-.1095,5.8926-.0044,27.0865.1729,54.1748-.0912,81.2587a167.8485,167.8485,0,0,0,2.9179,31.2159c5.0907,28.5819,10.0293,57.1909,15.0075,85.7927.3332,1.9148.4941,3.86.7867,6.2036a24.7055,24.7055,0,0,1-3.852.6631c-8.7372.0544-17.475.0331-26.2125.0333q-61.5979.0007-123.1959-.0086C23.0329,488.53,20.46,488.4036,17.0907,488.3145ZM160.9883,260.6124a21.0366,21.0366,0,0,0,3.7566-.5959c6.597-2.3068,11.682-6.6807,15.9988-12.0331,6.8081-8.4417,11.2785-18.0972,14.602-28.337,5.025-15.4822,7.0315-31.4723,7.7324-47.642a207.9884,207.9884,0,0,0-1.3162-35.9365c-1.8927-14.5263-4.7881-28.8169-10.1007-42.5352A79.7963,79.7963,0,0,0,179.0941,71.45a38.6784,38.6784,0,0,0-11.3785-9.7131c-2.0551-1.1164-4.1343-2.3332-6.4883-2.2291-.39.6042-.8144.9542-.8147,1.3043q-.0788,98.8375-.0751,197.6753A8.8542,8.8542,0,0,0,160.9883,260.6124Z"/>
    </g>
  </g>
</svg>

内容的提问来源于stack exchange，提问作者nandanimal