为什么“ SVG线性渐变”无法通过使用起作用?

时间:2019-06-17 12:05:19

标签: svg gradient

我无法获得此svg以便在渐变下正常工作。该Svg是从figma导出的。打开普通的SVG效果很好,但是将其插入html会禁用所有渐变。

我像这样过去将svg放入我的html中:

.wrap
   svg
      use(xlink:href="#header-icon")

svg.wrap只有我想要的宽度和高度 svg只是宽度100%和高度100%

<svg width="43" height="74" viewBox="0 0 43 74" fill="none" xmlns="http://www.w3.org/2000/svg">
    <symbol id="header-icon">
        <path d="M42.0001 9.18225L41.8544 60.2884L28.0178 68.2965L28.1635 17.2631L42.0001 9.18225Z" fill="#489AC4"/>
        <path d="M28.1633 17.2631L28.0177 68.2965L14.0354 60.2884L14.181 9.18225L28.1633 17.2631Z" fill="#3C415F"/>
        <path d="M14.181 9.18225L28.0176 1.17416L41.9999 9.18225L28.1633 17.2631L14.181 9.18225Z" fill="url(#paint0_linear)" stroke="black" stroke-width="0.5" stroke-miterlimit="10"/>
        <path d="M1 25.4169V62.6181L10.103 68.4422V30.1489L1 25.4169Z" fill="url(#paint1_linear)"/>
        <path d="M10.103 30.1489V68.4421L18.7691 62.618L18.9876 25.344L10.103 30.1489Z" fill="#489AC4"/>
        <path d="M18.9876 25.3441L10.1759 20.612L1.21851 25.3441L10.0302 30.1489L18.9876 25.3441Z" fill="url(#paint2_linear)" stroke="black" stroke-width="0.5" stroke-miterlimit="10"/>
        <path d="M9.59326 42.8163V68.151L18.6235 73.1742L18.8419 47.1115L9.59326 42.8163Z" fill="url(#paint3_linear)"/>
        <path d="M18.842 47.1115L18.6235 73.1742L28.0179 68.2237L27.7994 42.9619L18.842 47.1115Z" fill="#3C415F"/>
        <path d="M27.6538 42.8891L18.7692 38.8122L9.88464 42.8891L18.6964 47.0387L27.6538 42.8891Z" fill="url(#paint4_linear)" stroke="black" stroke-width="0.4634" stroke-miterlimit="10"/>
        <defs>
            <linearGradient id="paint0_linear" x1="68.6732" y1="41.4455" x2="13.7046" y2="-2.25236" gradientUnits="userSpaceOnUse">
            <stop stop-color="#535BA3"/>
            <stop offset="0.5056" stop-color="#925DA1"/>
            <stop offset="1" stop-color="#BE4F46"/>
            </linearGradient>
            <linearGradient id="paint1_linear" x1="-0.32198" y1="62.3885" x2="8.29796" y2="39.6972" gradientUnits="userSpaceOnUse">
            <stop stop-color="#009BC7"/>
            <stop offset="1" stop-color="#373F60"/>
            </linearGradient>
            <linearGradient id="paint2_linear" x1="-14.3658" y1="46.2287" x2="18.7608" y2="17.9828" gradientUnits="userSpaceOnUse">
            <stop stop-color="#535BA3"/>
            <stop offset="0.5056" stop-color="#925DA1"/>
            <stop offset="1" stop-color="#BE4F46"/>
            </linearGradient>
            <linearGradient id="paint3_linear" x1="10.4798" y1="67.5335" x2="16.3507" y2="52.0789" gradientUnits="userSpaceOnUse">
            <stop stop-color="#009BC7"/>
            <stop offset="1" stop-color="#373F60"/>
            </linearGradient>
            <linearGradient id="paint4_linear" x1="-5.72714" y1="63.7579" x2="27.3994" y2="35.5121" gradientUnits="userSpaceOnUse">
            <stop stop-color="#535BA3"/>
            <stop offset="0.5056" stop-color="#925DA1"/>
            <stop offset="1" stop-color="#BE4F46"/>
            </linearGradient>
        </defs>
    </symbol>
</svg>

期望渐变起作用,但是我看到没有填充颜色的空矩形。我试图通过use(xlink)使用文件url和内联代码来插入它,结果相同

0 个答案:

没有答案