Как применить градиент, используя фильтр SVG

Question

Я хочу создать фильтр, который при применении к элементу HTML, будет применять градиент ко всему элементу. Градиент CSS относится только к фону, поэтому это не то, что я хочу. Я хочу сказать, что мой элемент содержит треугольник и круг, я хочу применить фильтр к моему элементу, а к треугольнику и кругу будет применен градиент.

Вот что у меня так далеко:

.my-element{
    filter: url(svg.svg#filter);
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <defs>
        <linearGradient id="lightGradient" gradientTransform="rotate(-5)">
            <stop stop-color="white" stop-opacity="0.4" offset="0%"/>
            <stop stop-color="white" stop-opacity="0.5" offset="5%"/>
            <stop stop-color="black" stop-opacity="0.2" offset="6%"/>
            <stop stop-color="black" stop-opacity="0.3" offset="19%"/>
            <stop stop-color="black" stop-opacity="0.2" offset="12%"/>
            <stop stop-color="white" stop-opacity="0.8" offset="13%"/>
            <stop stop-color="white" stop-opacity="0.9" offset="15%"/>
            <stop stop-color="white" stop-opacity="0" offset="15%"/>
            <stop stop-color="white" stop-opacity="0" offset="16%"/>
            <stop stop-color="white" stop-opacity="0.8" offset="16%"/>
            <stop stop-color="white" stop-opacity="0.9" offset="18%"/>
            <stop stop-color="white" stop-opacity="0" offset="18%"/>
            <stop stop-color="white" stop-opacity="0" offset="20%"/>
            <stop stop-color="white" stop-opacity="1" offset="20%"/>
            <stop stop-color="white" stop-opacity="1" offset="25%"/>
        </linearGradient>

        <rect id="recGradient" x="0" y="0" width="100%" height="100%" fill="url(#lightGradient)"/>

        <filter id="filter" primitiveUnits="objectBoundingBox">
            <feImage x="0" y="0" width="100%" height="100%" preserveAspectRatio="none" xlink:href="#recGradient"/>

            <feComposite operator="in" in="SourceGraphic"/>
        </filter>
      </defs>
    </svg>

Редактировать: с приведенным выше кодом элемент просто становится невидимым в Firefox, в Chrome, похоже, работает.

так что, очевидно, я делаю это неправильно. Я понятия не имею, как создавать фильтры SVG, поэтому любая помощь будет оценена.

Answer 1

Вот как вы создаете кросс-браузерный фильтр, который делает то, что вы хотите здесь. Размеры сложны, потому что вы определяете прямоугольник с применением градиента в DataURI, затем перетаскиваете его в фильтр, используя feImage, а затем применяете это к HTML-контенту, используя люк фильтра SVG в фильтрах CSS. Но это работает.

(Кстати - неясно, хотите ли вы сохранить цвет исходного текста и просто применить градиент непрозрачности, или вы хотите, чтобы черно-белый градиент переопределял исходный цвет. Вы можете изменить это, изменив "in2" "to" in "в feComposite. Это определяет, применяете ли вы непрозрачность исходной графики к градиенту или наоборот.)

div {
  filter: url(#myGradient);
}

<svg>
  <defs>
<filter id="myGradient" primitiveUnits="objectBoundingBox">
       <feImage x="0%" y="0%" width="100%" height="100%" preserveAspectRatio="none" xlink:href="data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%22200px%22%20height%3D%22200px%22%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3ClinearGradient%20id%3D'lightGradient'%20gradientTransform%3D'rotate(-5)'%3E%3Cstop%20stop-color%3D'white'%20stop-opacity%3D'0.4'%20offset%3D'0%25'%2F%3E%3Cstop%20stop-color%3D'white'%20stop-opacity%3D'0.5'%20offset%3D'5%25'%2F%3E%3Cstop%20stop-color%3D'black'%20stop-opacity%3D'0.2'%20offset%3D'6%25'%2F%3E%3Cstop%20stop-color%3D'black'%20stop-opacity%3D'0.3'%20offset%3D'19%25'%2F%3E%3Cstop%20stop-color%3D'black'%20stop-opacity%3D'0.2'%20offset%3D'12%25'%2F%3E%3Cstop%20stop-color%3D'white'%20stop-opacity%3D'0.8'%20offset%3D'13%25'%2F%3E%3Cstop%20stop-color%3D'white'%20stop-opacity%3D'0.9'%20offset%3D'15%25'%2F%3E%3Cstop%20stop-color%3D'white'%20stop-opacity%3D'0'%20offset%3D'15%25'%2F%3E%3Cstop%20stop-color%3D'white'%20stop-opacity%3D'0'%20offset%3D'16%25'%2F%3E%3Cstop%20stop-color%3D'white'%20stop-opacity%3D'0.8'%20offset%3D'16%25'%2F%3E%3Cstop%20stop-color%3D'white'%20stop-opacity%3D'0.9'%20offset%3D'18%25'%2F%3E%3Cstop%20stop-color%3D'white'%20stop-opacity%3D'0'%20offset%3D'18%25'%2F%3E%3Cstop%20stop-color%3D'white'%20stop-opacity%3D'0'%20offset%3D'20%25'%2F%3E%3Cstop%20stop-color%3D'white'%20stop-opacity%3D'1'%20offset%3D'20%25'%2F%3E%3Cstop%20stop-color%3D'white'%20stop-opacity%3D'1'%20offset%3D'25%25'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%0A%20%20%3Crect%20id%3D'recGradient'%20x%3D'0%25'%20y%3D'0%25'%20width%3D'100%25'%20height%3D'100%25'%20fill%3D'url(%23lightGradient)'%2F%3E%3C%2Fsvg%3E"/>
  <feComposite operator="in" in2="SourceGraphic"/>
 </filter>
  </defs>
</svg>




<div>
  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text   Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text    Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text    Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text    Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text    Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text    Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text  Imagine a very large piece of text   
</div>