internet explorer 11 -如何使用svg制作垂直的跨浏览器线性梯度(适用于现代浏览器)

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中这样做，渐变我已经停止工作，矩形只是采取第一个句号颜色。

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

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>