Question

我无法在IE 11中使SVG垂直线性渐变工作，所以问题是 - 给定以下svg如何使标识为Gradient1的渐变以这样的方式工作，即它是一个垂直渐变？

<?xml version="1.0" encoding="utf-8"?>

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

                viewBox="0 0 79.4 59.5"  xml:space="preserve">

<rect x="2.4" y="29.8" width="74.6" height="27.4"/>

<g>

                <defs>


         <linearGradient id="Gradient1" gradientUnits="userSpaceOnUse" x1="100%" y1="0%" x2="100%" y2="100%"  gradientTransform="rotate(45 50 50)">

             <stop  offset="0%" style="stop-color:#9AAFCC"/>

            <stop  offset="20%" style="stop-color:#557096"/>

            <stop  offset="35%" style="stop-color:#36557D"/>

            <stop  offset="49%" style="stop-color:#1E3F6B"/>

            <stop  offset="63%" style="stop-color:#0D305D"/>

            <stop  offset="87%" style="stop-color:#032756"/>

            <stop  offset="100%" style="stop-color:#002453"/>

      </linearGradient>



                </defs>

                <rect x="2.4" y="2.4" class="st0" width="74.6" height="27.4" fill="url(#Gradient1)"/>

</g>





</svg>

我当然尝试使用gradientTransform，我在Chrome中有效（可能是其他浏览器但在IE中没有）在linearGradient元素中包含以下内容

x1="-383.9706" y1="317.1023" x2="-382.9706" y2="317.1023" gradientTransform="matrix(0 -27.3826 -27.3826 0 8722.7842 -10484.3682)"

然而，只要我尝试在IE中执行此操作，渐变我就停止工作，矩形只采用第一个完整停止颜色。

我愿意将渐变转换为CSS，如果它可以在svg中工作，如果这是唯一可用的跨浏览器解决方案。

Answer 1

您的示例在Chrome和IE中的功能与我相同。

<svg viewBox="0 0 79.4 59.5">

<rect x="2.4" y="29.8" width="74.6" height="27.4"/>

<defs>
  <linearGradient id="Gradient1" gradientUnits="userSpaceOnUse" x1="100%" y1="0%" x2="100%" y2="100%"  gradientTransform="rotate(45 50 50)">
    <stop  offset="0%" style="stop-color:#9AAFCC"/>
    <stop  offset="20%" style="stop-color:#557096"/>
    <stop  offset="35%" style="stop-color:#36557D"/>
    <stop  offset="49%" style="stop-color:#1E3F6B"/>
    <stop  offset="63%" style="stop-color:#0D305D"/>
    <stop  offset="87%" style="stop-color:#032756"/>
    <stop  offset="100%" style="stop-color:#002453"/>
  </linearGradient>
</defs>

<rect x="2.4" y="2.4" class="st0" width="74.6" height="27.4" fill="url(#Gradient1)"/>

</svg>

标记请求时，它是一个旋转45度的线性渐变。

如果希望渐变为垂直，请删除gradientTransform。

<svg viewBox="0 0 79.4 59.5">

<rect x="2.4" y="29.8" width="74.6" height="27.4"/>

<defs>
  <linearGradient id="Gradient1" gradientUnits="userSpaceOnUse" x1="100%" y1="0%" x2="100%" y2="100%">
    <stop  offset="0%" style="stop-color:#9AAFCC"/>
    <stop  offset="20%" style="stop-color:#557096"/>
    <stop  offset="35%" style="stop-color:#36557D"/>
    <stop  offset="49%" style="stop-color:#1E3F6B"/>
    <stop  offset="63%" style="stop-color:#0D305D"/>
    <stop  offset="87%" style="stop-color:#032756"/>
    <stop  offset="100%" style="stop-color:#002453"/>
  </linearGradient>
</defs>

<rect x="2.4" y="2.4" class="st0" width="74.6" height="27.4" fill="url(#Gradient1)"/>

</svg>

如何使用svg（对于现代浏览器）制作垂直交叉浏览器线性渐变？

1 个答案: