как получить растровый шаблон SVG для заполнения всей области элемента, а не плитки - PullRequest
Новая
       36

как получить растровый шаблон SVG для заполнения всей области элемента, а не плитки

0 голосов
/ 05 октября 2019

У меня есть объект SVG, в котором я использую PNG в качестве шаблона, который я использую в качестве заливки для <rect>, который выводится на экран. И тогда я применяю <mask> к этому <rect>. Я хочу, чтобы <rect> был заполнен PNG без мозаики ... как будто к нему применен CSS background-size: cover;.

У меня есть почти следующее: 

    html, body {
      width: 100%;
    }
    
    div {
      width: 100%;
      height: 100%;
    }
    
    .outer {
      text-align: right;
      background: url(https://image.freepik.com/free-photo/wall-wallpaper-concrete-colored-painted-textured-concept_53876-31799.jpg);
      background-size: cover;
      height: 500px;
    }
    
    .inner {
      width: 50%;
      float: right;
    }
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="height: 0;"> 
      <defs> 
        <pattern id="imgpat2" patternUnits="userSpaceOnUse" height="200" width="100%"> 
          <image xlink:href="https://png.pngtree.com/thumb_back/fh260/background/20190831/pngtree-cracked-wooden-texture-background-wood-plane-image_310870.jpg" x="0" y="0">
          </image> 
        </pattern> 
      </defs> 
    </svg>
    
    
    <div class="outer">
      <div class="inner">
        <svg id="right" height="100%" width="100%">    
      <defs> 
        <pattern id="imgpattern" x="0" y="0">
            <image xlink:href="https://png.pngtree.com/thumb_back/fh260/background/20190831/pngtree-cracked-wooden-texture-background-wood-plane-image_310870.jpg" height="100%"/>
          </pattern>
        <linearGradient id="fadeGrad" y2="0" x2="1">
          <stop offset="0" stop-color="white" stop-opacity="0"/>
          <stop offset=".2" stop-color="white" stop-opacity="1"/>
        </linearGradient>
        <mask id="fade" maskContentUnits="objectBoundingBox">
          <rect width="1" height="1" fill="url(#fadeGrad)"/>
        </mask>
      </defs>
          <!--<rect fill="url(#imgpattern)" width="100%" height="100%" mask="url(#fade)" />-->
          <rect fill="url(#imgpat2)" width="100%" height="100%" mask="url(#fade)" />
    </svg>
      </div>  
    </div>

<br/>

Просмотреть перо здесь

Но, как вы можете видеть, фон с правой стороны является мозаичным. Я почти уверен, что это где-то в этой строке: 

<pattern id="imgpat2" patternUnits="userSpaceOnUse" height="200" width="100%">

, но я путаюсь со всеми атрибутами, особенно когда изменение высоты и ширины не делает ожидаемых изменений.

В реальном продукте высота и ширина этой строки будут различаться по размерам в разных сценариях, а также изменятся в размере при изменении размера браузера, поэтому эффект background-size: cover действительно должен работать. И используемые текстурыс обеих сторон они полностью ориентированы на пользователя, поэтому они могут быть чем угодно и могут меняться в любое время, и им все равно нужно плавно сливаться друг с другом, поэтому я использую SVG с маской на правой стороне. не были бы для IE, я бы бросил SVG и просто использовал -webkit-mask-image (и я все еще могу ... если это не может быть чисто выполнено).

Может кто-нибудь сказать, что нужно изменить в порядкедля фонового изображения, используемого в SVG, чтобы занять все пространство, а не мозаику? или есть более простой способ обойти это, что мне не хватает?

...