我是 SVG 图像的新手。我用它们在一件夹克上涂上几次不同的颜色,而不需要每种颜色都有一个图像。这是通过 jQuery 完成的。
这是“简单”的部分。我通过应用 fill: #color;
解决了这个问题CSS 规则为 <path>
里面<svg>
.
困难的部分是尝试用图像填充 svg 路径。真的很奇怪。我的代码在 <svg>
内的 html 中打印得很好,但根本不起作用。当我在 Chrome 的开发工具中剪切 <defs>
时元素,然后将其再次粘贴到原来的位置,它突然起作用了!这让我发疯:(。
我的代码:
var items = [
{
title: 'Africa',
// color: '#776254'
},
{
title: 'Aguamarina',
// color: '#9cd3be'
},
{
title: 'Aluminio',
// color: '#9b9b9b'
},
{
title: 'Amarillo Jamaica',
// color: '#ffcd01'
},
{
title: 'Amatista',
// color: '#4d4169'
},
{
title: 'Ambar Brillante',
// color: '#eb6608'
},
{
title: 'Arándano',
// color: '#604483'
}
];
$(function () {
var PrendaShow = {
$mac_wrapper: $('#prendas-mac-slider-wrapper .mac-slider'),
$fullprints_wrapper: $('#fullprints-gallery'),
img: {
src: 'image.svg',
width: 350,
height: 188
},
init: function () {
this.makeItems();
this.bindEvents();
},
bindEvents: function () {
// events
},
makeItems: function() {
var self = this,
$model = $('<div/>', { class: 'mac-item' });
$model.append($('<div/>', { class: 'item-img' }));
$.each(items, function() {
var $item = $model.clone();
self.$mac_wrapper.append($item);
});
this.svgDraw();
},
svgDraw: function () {
var self = this;
$.get(this.img.src, function(data) {
var $svg = self.normalizeSvg(data);
self.appendImgs($svg);
});
},
normalizeSvg: function (data) {
var $svg = $(data).find('svg');
$svg = $svg.removeAttr('xmlns:a');
$svg.width(this.img.width).height(this.img.height);
return $svg;
},
appendImgs: function ($svg) {
var items = this.$mac_wrapper.find('.mac-item');
$.each(items, function() {
var $clone = $svg.clone(),
color = $(this).data('color');
$clone.find('path').css('fill', 'url(#img1)');
var img = document.createElementNS('http://www.w3.org/2000/svg', 'image');
img.setAttributeNS(null,'height','536');
img.setAttributeNS(null,'width','536');
img.setAttributeNS('http://www.w3.org/1999/xlink','href','http://www.boogdesign.com/examples/svg/daisy-grass-repeating-background.jpg');
img.setAttributeNS(null,'x','10');
img.setAttributeNS(null,'y','10');
img.setAttributeNS(null, 'visibility', 'visible')
$clone.prepend($('<defs/>').html('<pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100"></pattern>'));
$clone.find('pattern').append(img)
$(this).find('.item-img').append($clone);
});
}
};
PrendaShow.init();
});
#prendas-mac-slider-wrapper {
margin-top: 80px;
}
.mac-slider {
display: flex;
font-size: 0;
padding: 0 100px;
}
.mac-item {
width: 100%;
height: 160px;
min-width: 0;
position: relative;
display: inline-block;
text-align: center;
cursor: pointer;
}
.item-img {
background: url('https://ae01.alicdn.com/kf/HTB1Cqi6KXXXXXbpXVXXq6xXFXXXy/Classic-font-b-White-b-font-font-b-Jacket-b-font-font-b-Men-b-font.jpg') center center no-repeat;
background-size: contain;
pointer-events: none;
position: absolute;
top: 0;
left: -9999px;
right: -9999px;
margin: auto;
}
svg {
mix-blend-mode: multiply;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hero">
<div class="container-fluid">
<div id="prendas-mac-slider-wrapper" class="row">
<div class="mac-slider">
</div>
</div>
</div>
</div>
由于图像上传,我无法给出确切的示例。我真的希望你能理解我在这里想做什么,以及出了什么问题。
<小时/>编辑:不确定这是否值得作为答案,但我更愿意在这里写它,因为我认为这不是正确的方法。
据我所知,从 Chrome 开发工具中删除 <defs>
元素并再次粘贴它,它起作用了,我尝试了这个并且起作用了:
var svg_html = $svg.html();
$svg.html('');
$svg.html(svg_html);
最佳答案
您的问题在这里:
$clone.prepend($('<defs/>').html('<pattern ...
您不能使用 jQuery 创建这样的 SVG 元素。当您创建 createElementNS()
时,您正在以正确的方式执行此操作(使用 <image>
)元素。但创建 <defs>
时也需要使用相同的方法。和 <pattern>
元素。
关于javascript - 如何动态地将图案图像添加到 svg 中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39986537/