Как сделать текст черным, но белым над изображением svg, используя css mix-blend-mode

Question

У меня есть текст и изображение SVG, я хочу сделать текст черным цветом, но части над изображением SVG белым цветом. Таким образом, изображение будет маской. Вот моя попытка

.bg{
  position:absolute;
  top:0;
  z-index:-1;
}
.p{
  color:black;
  mix-blend-mode: difference;
}

<p class='p'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum adipisci dolorem nostrum maxime incidunt quod quibusdam sint porro harum culpa voluptatum in libero eligendi quas, quisquam rerum eum ea! Expedita repellat quidem exercitationem excepturi voluptate consectetur aspernatur in temporibus eaque explicabo sunt id est suscipit, numquam ut nesciunt quaerat veniam placeat debitis ipsa provident itaque. Earum quas odio sequi odit atque ea explicabo. Itaque dignissimos cumque natus magni, ex, labore nihil, aperiam perferendis similique tempore, omnis impedit. Est qui eius ipsam assumenda nesciunt nam optio quam, ipsa eaque ut cum, dolore quas ea quisquam consectetur non quia aliquid explicabo! Aspernatur?
</p>

<svg class='bg' width="610px" height="650" viewBox="0 0 610 610" version="1.1" xmlns="http://www.w3.org/2000/svg"
     style="float: right;">
    <defs>
        <linearGradient x1="93.3400314%" y1="5.7888905%" x2="12.9002674%" y2="84.419059%" id="linearGradient-2">
            <stop stop-color="#1A2980" offset="0%"></stop>
            <stop stop-color="#26D0CE" offset="100%"></stop>
        </linearGradient>
    </defs>
    <g id="Page-2" fill="none" fill-rule="evenodd">
        <g id="left-first" transform="translate(-1.000000, 0.000000)" fill="url(#linearGradient-2)">
            <path d="M369.229,1.87 C331.97,-6.66 292.354,16.4 254.072,22.87 C217.142,29.11 172.133,19.8 138.434,40.94 C104.735,62.08 93.543,106.67 71.866,137.21 C49.391,168.87 11.396,194.51 2.866,231.77 C-5.664,269.03 17.402,308.65 23.866,346.93 C30.105,383.86 20.795,428.87 41.942,462.57 C63.089,496.27 107.67,507.46 138.209,529.14 C169.868,551.61 195.509,589.61 232.77,598.14 C270.031,606.67 309.645,583.6 347.929,577.14 C384.857,570.9 429.866,580.21 463.566,559.06 C497.266,537.91 508.456,493.34 530.136,462.79 C552.606,431.13 590.606,405.49 599.126,368.23 C607.646,330.97 584.596,291.35 578.126,253.07 C571.886,216.14 581.196,171.13 560.056,137.43 C538.916,103.73 494.326,92.54 463.786,70.86 C432.13,48.39 406.488,10.39 369.229,1.87 Z"
                  id="Shape_2_copy" transform="rotate(133.788 300 300)"></path>
            <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 300 300"
                              to="360 300 300" dur="35s" repeatCount="indefinite"></animateTransform>
        </g>
    </g>

</svg>

и вот что мне интересно:

Answer 1

Чтобы использовать mix-blend-mode: difference;, я использую элемент SVG в качестве фонового изображения. Чтобы получить код для использования в качестве фонового изображения, я использую кодировщик SVG от Yoksel.

Однако текст поверх изображения не будет белым.

CSS-свойство mix-blend-mode устанавливает, как содержимое элемента должно сливаться с содержимым родительского элемента и фона элемента.

Цвет текста зависит от цвета фонового изображения. Надеюсь, это поможет.

.wrap{width:100vw; height:800px;background: url("data:image/svg+xml,%3Csvg class='bg' width='610px' height='650' viewBox='0 0 610 610' version='1.1' xmlns='http://www.w3.org/2000/svg' style='float: right;'%3E%3Cdefs%3E%3ClinearGradient x1='93.3400314%25' y1='5.7888905%25' x2='12.9002674%25' y2='84.419059%25' id='linearGradient-2'%3E%3Cstop stop-color='%231A2980' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%2326D0CE' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Cg id='Page-2' fill='none' fill-rule='evenodd'%3E%3Cg id='left-first' transform='translate(-1.000000, 0.000000)' fill='url(%23linearGradient-2)'%3E%3Cpath d='M369.229,1.87 C331.97,-6.66 292.354,16.4 254.072,22.87 C217.142,29.11 172.133,19.8 138.434,40.94 C104.735,62.08 93.543,106.67 71.866,137.21 C49.391,168.87 11.396,194.51 2.866,231.77 C-5.664,269.03 17.402,308.65 23.866,346.93 C30.105,383.86 20.795,428.87 41.942,462.57 C63.089,496.27 107.67,507.46 138.209,529.14 C169.868,551.61 195.509,589.61 232.77,598.14 C270.031,606.67 309.645,583.6 347.929,577.14 C384.857,570.9 429.866,580.21 463.566,559.06 C497.266,537.91 508.456,493.34 530.136,462.79 C552.606,431.13 590.606,405.49 599.126,368.23 C607.646,330.97 584.596,291.35 578.126,253.07 C571.886,216.14 581.196,171.13 560.056,137.43 C538.916,103.73 494.326,92.54 463.786,70.86 C432.13,48.39 406.488,10.39 369.229,1.87 Z' id='Shape_2_copy' transform='rotate(133.788 300 300)'%3E%3C/path%3E%3CanimateTransform attributeName='transform' attributeType='XML' type='rotate' from='0 300 300' to='360 300 300' dur='35s' repeatCount='indefinite'%3E%3C/animateTransform%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),white;

background-position:center top; 
background-repeat:no-repeat;}

p{font-size:3em;
  color: white;
  mix-blend-mode: difference;
}

<div class="wrap">
  <p class='p'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum adipisci dolorem nostrum maxime incidunt quod quibusdam sint porro harum culpa voluptatum in libero eligendi quas, quisquam rerum eum ea! Expedita repellat quidem exercitationem excepturi voluptate consectetur aspernatur in temporibus eaque explicabo sunt id est suscipit, numquam ut nesciunt quaerat veniam placeat debitis ipsa provident itaque. Earum quas odio sequi odit atque ea explicabo. Itaque dignissimos cumque natus magni, ex, labore nihil, aperiam perferendis similique tempore, omnis impedit. Est qui eius ipsam assumenda nesciunt nam optio quam, ipsa eaque ut cum, dolore quas ea quisquam consectetur non quia aliquid explicabo! Aspernatur?</p>
</div>

Answer 2

Я думаю, вы хотите прожечь цвета в режиме смешивания-смешивания ...

.bg {
    position: absolute;
    top: 0;
    z-index: -1;
    right: 0;
    left: 0;
    margin: auto;
    background-color: white;
}.p {
    margin: 0 auto;
    padding: 10px;
    width: 50%;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    mix-blend-mode: color-burn;
}

<p class='p'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum adipisci dolorem nostrum maxime incidunt quod quibusdam sint porro harum culpa voluptatum in libero eligendi quas, quisquam rerum eum ea! Expedita repellat quidem exercitationem excepturi voluptate consectetur aspernatur in temporibus eaque explicabo sunt id est suscipit, numquam ut nesciunt quaerat veniam placeat debitis ipsa provident itaque. Earum quas odio sequi odit atque ea explicabo. Itaque dignissimos cumque natus magni, ex, labore nihil, aperiam perferendis similique tempore, omnis impedit. Est qui eius ipsam assumenda nesciunt nam optio quam, ipsa eaque ut cum, dolore quas ea quisquam consectetur non quia aliquid explicabo! Aspernatur?
</p>

<svg class='bg' width="610px" height="650" viewBox="0 0 610 610" version="1.1" xmlns="http://www.w3.org/2000/svg"
     style="float: right;">
    <defs>
        <linearGradient x1="93.3400314%" y1="5.7888905%" x2="12.9002674%" y2="84.419059%" id="linearGradient-2">
            <stop stop-color="#1A2980" offset="0%"></stop>
            <stop stop-color="#26D0CE" offset="100%"></stop>
        </linearGradient>
    </defs>
    <g id="Page-2" fill="none" fill-rule="evenodd">
        <g id="left-first" transform="translate(-1.000000, 0.000000)" fill="url(#linearGradient-2)">
            <path d="M369.229,1.87 C331.97,-6.66 292.354,16.4 254.072,22.87 C217.142,29.11 172.133,19.8 138.434,40.94 C104.735,62.08 93.543,106.67 71.866,137.21 C49.391,168.87 11.396,194.51 2.866,231.77 C-5.664,269.03 17.402,308.65 23.866,346.93 C30.105,383.86 20.795,428.87 41.942,462.57 C63.089,496.27 107.67,507.46 138.209,529.14 C169.868,551.61 195.509,589.61 232.77,598.14 C270.031,606.67 309.645,583.6 347.929,577.14 C384.857,570.9 429.866,580.21 463.566,559.06 C497.266,537.91 508.456,493.34 530.136,462.79 C552.606,431.13 590.606,405.49 599.126,368.23 C607.646,330.97 584.596,291.35 578.126,253.07 C571.886,216.14 581.196,171.13 560.056,137.43 C538.916,103.73 494.326,92.54 463.786,70.86 C432.13,48.39 406.488,10.39 369.229,1.87 Z"
                  id="Shape_2_copy" transform="rotate(133.788 300 300)"></path>
            <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 300 300"
                              to="360 300 300" dur="35s" repeatCount="indefinite"></animateTransform>
        </g>
    </g>

</svg>