我是使用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/