Вставить несколько изображений в путь svg

Я хочу вставить несколько изображений, включая цвет фона.Вставить несколько изображений в путь svg

<defs> 
    <pattern id="img1" patternUnits="userSpaceOnUse" width="1280" height="15"> 
     <image xlink:href="images/l1gloss.png" x="0" y="0" width="1280" height="15" /> 
    </pattern> 
</defs> 

<path id="curve" style="fill:#990000 url(#img1)" d="M1279.919,13c0,0-612.618,21.562- 816.925,22.298C347.224,35.715,0,26,0,26V13c0,0,347.981,9.71,464.005,9.287C668.059,21.542,1279.919,0,1279.919,0V13z" filter="url(#f1)" stroke="none"> </path>

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

источник

2014-11-07 iawara

Вы не можете заполнить путь цветом и рисунком вместе. Вы можете выполнить эту задачу, создав два пути. Путь с фоновым цветом должен зависеть от другого.

<path class="curve" style="fill:#990000" d="M1279.919,13c0,0-612.618,21.562- 816.925,22.298C347.224,35.715,0,26,0,26V13c0,0,347.981,9.71,464.005,9.287C668.059,21.542,1279.919,0,1279.919,0V13z" filter="url(#f1)" stroke="none"> </path> 
<path class="curve" style="url(#img1)" d="M1279.919,13c0,0-612.618,21.562- 816.925,22.298C347.224,35.715,0,26,0,26V13c0,0,347.981,9.71,464.005,9.287C668.059,21.542,1279.919,0,1279.919,0V13z" filter="url(#f1)" stroke="none"> </path>

источник

2014-11-07 06:02:04 Gilsha

привет, Thankyou очень много .. Могу ли я использовать маску/clip-mask для этого, т.е.

. Если это формат, то здесь я могу маскировать #maskDiv с помощью элемента #svgMask. Это возможно. – iawara

Соедините цвет фона с рисунком, используя прямоугольник, как показано ниже. (Кстати у вас есть фильтр (без ссылок f1) в примере кода выше - и вы не указали поведение с соотношением сторон для вашего изображения - скорректированный ниже)

<svg width="100%" height="100%" viewBox= 
0 0 2000 2000""> 
    <defs> 
    <pattern id="img1" patternUnits="userSpaceOnUse" width="1280" height="15"> 
     <rect fill="#ff0000" x="0" y="0" width="1280" height="15"/> 
     <image xlink:href="http://asia.olympus-imaging.com/products/dslr/e520/sample/images/sample_03.jpg" x="0" y="0" width="1280" height="15" preserveAspectRatio="xMinYMin meet"/> 

    </pattern> 
</defs> 

<path id="curve" d="M1279.919,13 c0,0 -612.618,21.562 -816.925,22.298C347.224,35.715,0,26,0,26V13c0,0,347.981,9.71,464.005,9.287C668.059,21.542,1279.919,0,1279.919,0V13z" fill="url(#img1)" stroke="none"> </path> 

</svg>

источник

2014-11-08 01:10:06

Вставить несколько изображений в путь svg

ответ

Смежные вопросы