Заполнить элемент пути SVG с фоновым изображением

126

Можно ли установить background-image для элемента SVG <path>?Заполнить элемент пути SVG с фоновым изображением

Например, если установить элемент class="wall", стиль CSS .wall {fill: red;} работает, но .wall{background-image: url(wall.jpg)} не делает, ни .wall {background-color: red;}.

источник

2010-09-25 jbochi

Показывает, как установить фоновое изображение для текста SVG, опционально для каждого символа: http://stackoverflow.com/a/10853878/405017 – Phrogz

для тех, кто ищет еще более глубокую информацию. ] (http://vanseodesign.com/web-design/svg-pattern-attributes/) –

200

Вы можете сделать это, сделав фон в pattern:

<defs> 
    <pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100"> 
    <image xlink:href="wall.jpg" x="0" y="0" width="100" height="100" /> 
    </pattern> 
</defs>

Отрегулируйте ширину и высоту в соответствии с вашим изображением, а затем ссылаться на него с пути, как это:

<path d="M5,50 
     l0,100 l100,0 l0,-100 l-100,0 
     M215,100 
     a50,50 0 1 1 -100,0 50,50 0 1 1 100,0 
     M265,50 
     l50,100 l-100,0 l50,-100 
     z" 
    fill="url(#img1)" />

Working example

источник

2010-09-26 16:45:44 robertc

очень приятно, это тоже работает с изображениями base64? вместо wall.jpg что-то вроде 'data: image/png; base64, iVBORw0KGgoAA', как в обычном CSS? – Christoph

@ Кристоф Я не знаю, попробуй и посмотри. – robertc

@robertc Я пробовал, и это не сработало, но у меня был элемент с повторяющимся стилем. Удалив его, он работал нормально:) – Christoph

Ответ на вопрос «robertc» - это svg - и это похоже на то, что используется кодом пути d3.js. Мне удалось создать динамический def для путей d3.js, применив следующее.

мне удалось получить его работу, определив его как следующий

chart.append("defs") 
    .append('pattern') 
    .attr('id', 'locked2') 
    .attr('patternUnits', 'userSpaceOnUse') 
    .attr('width', 4) 
    .attr('height', 4) 
    .append("image") 
    .attr("xlink:href", "locked.png") 
    .attr('width', 4) 
    .attr('height', 4);

источник

2013-12-11 13:00:41

это d3.js? если это так, вы должны упомянуть об этом, потому что это не в тегах вопроса – BiAiB

Ну, я не писал вопрос? Я выполнил поиск кода - нашел эту страницу. Он подошел к счету и, похоже, работал для меня. –

Я знаю, что вы не писали вопрос. Вопроситель запрашивает svg-решения, и вы сбрасываете javascript-код. Это даже не чистый javascript, поэтому вы использовали какую-то библиотеку. Я подозреваю, что это d3.Но когда случайный пользователь входит в ваш ответ, это бесполезно, потому что он понятия не имеет, как его использовать. Я голосую, пока вы не уточните. – BiAiB

-4

Если ваш одиночный SVG цвет, лучший путь преобразования SVGs в файлы шрифтов.

Вы можете использовать инструмент icomoon.io, чтобы передать все ваши SVG-файлы в файлы шрифтов и использовать их в качестве классов значков шрифтов, например Fontawesome.

источник

2017-03-18 13:46:10

Это, похоже, вообще не отвечает на исходный вопрос. –

Заполнить элемент пути SVG с фоновым изображением

ответ

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