Использование растрового изображения в качестве черепичной фона в масштабируемого SVG

Question

Я застрял пытается получить следующие работы:

• Встроенный SVG изображения, в html5 документе.
• У этого есть один многоугольник (треугольник), принимая все svg viewport: ◤
• Это должно простираться, чтобы взять всю высоту своего контейнера.

До сих пор так хорошо, этот пример делает работу:

#container { 
 
    position: relative; 
 
    width: 5em; height: 5em; 
 
    resize: both; overflow: hidden; // so we can play with it in demo 
 
} 
 

 
#triangle { 
 
    position: absolute; 
 
    top: 0; left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    fill: #00f; 
 
    pointer-events: none;   // so we can grab the resize handle 
 
}

<div id="container"> 
 
    <svg id="triangle" viewBox="0 0 10 10" preserveAspectRatio="none"> 
 
    <polygon points="0,0 0,10 10,0" /> 
 
    </svg> 
 
</div>

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

Существует только одна последняя вещь, которую я скучаю и не могу понять, как это сделать:

• Треугольник должен быть текстурированной с использованием растрового изображения (PNG-файл)
• что текстура не должна быть расширена.

До сих пор моя лучшая попытка с использованием исходной системы (без директивы VIEWPORT) координат, чтобы применить фильтр к площади, как это:

#container { 
 
    position: relative; 
 
    width: 5em; height: 5em; 
 
    resize: both; overflow: hidden; // so we can play with it in demo 
 
} 
 
#triangle { 
 
    position: absolute; 
 
    top: 0; left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    pointer-events: none;   // so we can grab the resize handle 
 
}

<div id="container"> 
 
    <svg id="triangle" preserveAspectRatio="none"> 
 
    <defs> 
 
     <filter id="Tiled"> 
 
     <feImage xlink:href="https://www.w3.org/TR/SVG/images/filters/smiley.png" 
 
       x="0" y="0" width="100" height="100" result="texture"/> 
 
     <feTile in="texture" x="0" y="0" width="100%" height="100%"/> 
 
     </filter> 
 
    </defs> 
 

 
    <rect filter="url(#Tiled)" x="0" y="0" width="100%" height="100%"/> 
 
    </svg> 
 
</div>

Опять же, попробуйте изменение размера изображения с помощью (невидимого) дескриптора в нижнем правом углу: фоновая текстура становится черепицей.

Таким образом, вопрос:

Второй пример работает благодаря width="100%". Однако полигоны не принимают процентные координаты.

→ Как достичь поведения черепицы второго примера, но на полигоне с динамическим размером, например, в первом примере?

Answer 1

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

#container { 
 
    position: relative; 
 
    width: 5em; height: 5em; 
 
    resize: both; overflow: hidden; // so we can play with it in demo 
 
} 
 
#triangle { 
 
    position: absolute; 
 
    top: 0; left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    pointer-events: none;   // so we can grab the resize handle 
 
}

<div id="container"> 
 
    <svg id="triangle" preserveAspectRatio="none"> 
 
    <defs> 
 
     <filter id="Tiled"> 
 
     <feImage xlink:href="https://www.w3.org/TR/SVG/images/filters/smiley.png" 
 
       x="0" y="0" width="100" height="100" result="texture"/> 
 
     <feTile in="texture" x="0" y="0" width="100%" height="100%"/> 
 
     </filter> 
 
     <clipPath id="clip" clipPathUnits="objectBoundingBox"> 
 
      <polygon points="0,0 0,1 1,0" /> 
 
     </clipPath> 
 
    </defs> 
 

 
    <rect clip-path="url(#clip)" filter="url(#Tiled)" x="0" y="0" width="100%" height="100%"/> 
 
    </svg> 
 
</div>