如何将视频或图片嵌入指定SVG形状？求技术解决方案

问题描述 #

需求：希望将视频或图片嵌入到指定形状中，目前已获取包含该目标形状的SVG文件。请问是否需要基于SVG使用relative/absolute position（相对/绝对定位）来实现？或者有其他可行的解决方案？

附上SVG代码及效果示意图：

<svg width="900" height="837" viewBox="0 0 900 837" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <path d="M1114.67 332.326C1111.96 474.975 1003 623.001 873.91 716.519C744.824 810.038 595.613 849.05 466.017 832.32C336.962 816.158 226.387 744.256 162.176 650.646C97.9132 558.172 53.973 440.573 24.7109 290.615C-4.5512 140.657 -18.5415 -42.231 53.639 -131.063C126.953 -219.898 312.481 -211.262 473.506 -187.791C634.531 -164.319 771.646 -126.581 892.222 -38.2237C1012.8 50.1335 1116.83 189.11 1114.67 332.326Z" fill="url(#pattern0)"/>

    <path d="M1114.67 332.326C1111.96 474.975 1003 623.001 873.91 716.519C744.824 810.038 595.613 849.05 466.017 832.32C336.962 816.158 226.387 744.256 162.176 650.646C97.9132 558.172 53.973 440.573 24.7109 290.615C-4.5512 140.657 -18.5415 -42.231 53.639 -131.063C126.953 -219.898 312.481 -211.262 473.506 -187.791C634.531 -164.319 771.646 -126.581 892.222 -38.2237C1012.8 50.1335 1116.83 189.11 1114.67 332.326Z" fill="black" fill-opacity="0.2"/><path d="M1114.67 332.326C1111.96 474.975 1003 623.001 873.91 716.519C744.824 810.038 595.613 849.05 466.017 832.32C336.962 816.158 226.387 744.256 162.176 650.646C97.9132 558.172 53.973 440.573 24.7109 290.615C-4.5512 140.657 -18.5415 -42.231 53.639 -131.063C126.953 -219.898 312.481 -211.262 473.506 -187.791C634.531 -164.319 771.646 -126.581 892.222 -38.2237C1012.8 50.1335 1116.83 189.11 1114.67 332.326Z" fill="url(#paint0_linear_576_15291)" fill-opacity="0.6"/>
    <path d="M1114.67 332.326C1111.96 474.975 1003 623.001 873.91 716.519C744.824 810.038 595.613 849.05 466.017 832.32C336.962 816.158 226.387 744.256 162.176 650.646C97.9132 558.172 53.973 440.573 24.7109 290.615C-4.5512 140.657 -18.5415 -42.231 53.639 -131.063C126.953 -219.898 312.481 -211.262 473.506 -187.791C634.531 -164.319 771.646 -126.581 892.222 -38.2237C1012.8 50.1335 1116.83 189.11 1114.67 332.326Z" fill="url(#paint1_linear_576_15291)" fill-opacity="0.6"/><svg><pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
            <use xlink:href="#image0_576_15291" transform="matrix(0.000466395 -0.000495293 0.000425126 0.000543374 -0.310932 0.926322)"/></pattern><linearGradient id="paint0_linear_576_15291" x1="530.055" y1="162.509" x2="458.814" y2="325.989" gradientUnits="userSpaceOnUse"><stop/>
            <stop offset="1" stop-opacity="0"/></linearGradient><linearGradient id="paint1_linear_576_15291" x1="753.981" y1="675.337" x2="550.33" y2="447.382" gradientUnits="userSpaceOnUse"><stop/><stop offset="1" stop-opacity="0"/></linearGradient>
</svg>

解决方案：不用相对/绝对定位，推荐SVG原生方案 #

1. 使用<mask>实现图片/视频嵌入 #

mask是SVG原生遮罩功能，用你现有的路径作为遮罩模板，图片/视频放在遮罩下方，只会显示路径范围内的内容，支持动态视频，适配精准。

修改后的示例代码：

<svg width="900" height="837" viewBox="0 0 900 837" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- 定义遮罩：用目标路径作为遮罩形状 -->
    <mask id="shapeMask">
        <path d="M1114.67 332.326C1111.96 474.975 1003 623.001 873.91 716.519C744.824 810.038 595.613 849.05 466.017 832.32C336.962 816.158 226.387 744.256 162.176 650.646C97.9132 558.172 53.973 440.573 24.7109 290.615C-4.5512 140.657 -18.5415 -42.231 53.639 -131.063C126.953 -219.898 312.481 -211.262 473.506 -187.791C634.531 -164.319 771.646 -126.581 892.222 -38.2237C1012.8 50.1335 1116.83 189.11 1114.67 332.326Z" fill="white"/>
    </mask>

    <!-- 嵌入图片：替换成你的图片URL，应用遮罩 -->
    <image 
        xlink:href="你的图片URL" 
        width="100%" height="100%" 
        mask="url(#shapeMask)"
        preserveAspectRatio="xMidYMid slice" />

    <!-- 保留原有的装饰层 -->
    <path d="M1114.67 332.326C1111.96 474.975 1003 623.001 873.91 716.519C744.824 810.038 595.613 849.05 466.017 832.32C336.962 816.158 226.387 744.256 162.176 650.646C97.9132 558.172 53.973 440.573 24.7109 290.615C-4.5512 140.657 -18.5415 -42.231 53.639 -131.063C126.953 -219.898 312.481 -211.262 473.506 -187.791C634.531 -164.319 771.646 -126.581 892.222 -38.2237C1012.8 50.1335 1116.83 189.11 1114.67 332.326Z" fill="black" fill-opacity="0.2"/>
    <path d="M1114.67 332.326C1111.96 474.975 1003 623.001 873.91 716.519C744.824 810.038 595.613 849.05 466.017 832.32C336.962 816.158 226.387 744.256 162.176 650.646C97.9132 558.172 53.973 440.573 24.7109 290.615C-4.5512 140.657 -18.5415 -42.231 53.639 -131.063C126.953 -219.898 312.481 -211.262 473.506 -187.791C634.531 -164.319 771.646 -126.581 892.222 -38.2237C1012.8 50.1335 1116.83 189.11 1114.67 332.326Z" fill="url(#paint0_linear_576_15291)" fill-opacity="0.6"/>
    <path d="M1114.67 332.326C1111.96 474.975 1003 623.001 873.91 716.519C744.824 810.038 595.613 849.05 466.017 832.32C336.962 816.158 226.387 744.256 162.176 650.646C97.9132 558.172 53.973 440.573 24.7109 290.615C-4.5512 140.657 -18.5415 -42.231 53.639 -131.063C126.953 -219.898 312.481 -211.262 473.506 -187.791C634.531 -164.319 771.646 -126.581 892.222 -38.2237C1012.8 50.1335 1116.83 189.11 1114.67 332.326Z" fill="url(#paint1_linear_576_15291)" fill-opacity="0.6"/>

    <!-- 保留原有的渐变定义 -->
    <linearGradient id="paint0_linear_576_15291" x1="530.055" y1="16