因此,我使用 <img src="/svg.svg">
添加了一些自定义 SVG 图标到我的 Web 应用程序中.
然后我决定添加 toggleClass()
显示点击状态。这让我找到了一个小的 jQuery 片段,它将 IMG 转换为完整的 svg:
jQuery('img.svg').each(function(){
var $img = jQuery(this);
var imgID = $img.attr('id');
var imgClass = $img.attr('class');
var imgURL = $img.attr('src');
jQuery.get(imgURL, function(data) {
// Get the SVG tag, ignore the rest
var $svg = jQuery(data).find('svg');
// Add replaced image's ID to the new SVG
if(typeof imgID !== 'undefined') {
$svg = $svg.attr('id', imgID);
}
// Add replaced image's classes to the new SVG
if(typeof imgClass !== 'undefined') {
$svg = $svg.attr('class', imgClass+' replaced-svg');
}
// Remove any invalid XML tags as per http://validator.w3.org
$svg = $svg.removeAttr('xmlns:a');
// Replace image with new SVG
$img.replaceWith($svg);
}, 'xml');
});
结果是我最终得到了一个相当复杂的 SVG 对象,其结构如下:
- 父级:SVG
- G
- 路径/多边形
我想要的是通过单击事件定位整个 SVG 并更改填充。
Template.tabsOne.events({
'click .replaced-svg': function(){
$(this).attr('fill', 'blue);
}
})
不幸的是,我尝试了点击处理程序的几种变体,但我的 svg 拒绝更改其填充。有什么建议吗?
编辑:这是一个例子:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="209.217px" height="209.216px" viewBox="0 0 209.217 209.216" style="enable-background:new 0 0 209.217 209.216;" xml:space="preserve" class="svg custom-icon replaced-svg">
<g>
<polygon points="104.605,124.953 54.991,124.953 54.991,84.259 104.605,84.259 154.217,84.259 154.217,124.953 "></polygon>
<rect y="84.259" width="44.24" height="40.694"></rect>
<rect x="164.968" y="84.259" width="44.243" height="40.694"></rect>
<polygon points="209.217,73.509 159.593,73.509 109.98,73.509 109.98,22.174 209.217,22.174 "></polygon>
<polygon points="0,22.174 99.229,22.174 99.229,73.509 49.615,73.509 0,73.509 "></polygon>
<polygon points="0,135.704 49.615,135.704 99.229,135.704 99.229,187.042 0,187.042 "></polygon>
<polygon points="209.217,187.042 109.98,187.042 109.98,135.704 159.593,135.704 209.217,135.704 "></polygon>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
这是另一个:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="512px" height="640px" viewBox="0 0 512 640" enable-background="new 0 0 512 640" xml:space="preserve" class="black svg custom-icon replaced-svg">
<path d="M165.438,474.562c49.922,49.922,131.031,49.922,180.969,0c49.906-49.922,49.906-131.047,0-180.961L165.438,474.562z M448,0.32L64,0C28.641,0,0,28.641,0,64v512c0,35.359,28.641,64,64,64h384c35.359,0,64-28.641,64-64V64 C512,28.641,483.359,0.32,448,0.32z M192,64c17.602,0,32,14.398,32,32s-14.398,32-32,32s-32-14.398-32-32S174.398,64,192,64z M96,64 c17.602,0,32,14.398,32,32s-14.398,32-32,32s-32-14.398-32-32S78.398,64,96,64z M256,576c-106.078,0-192-85.922-192-192 s85.922-192,192-192s192,85.922,192,192S362.078,576,256,576z" fill="#000000"></path>
</svg>
最佳答案
类似这样的东西(您需要更改<path>
元素上的填充属性):
$(document).ready(function(){
$('svg').click(function(e){
$(this).find('path').attr('fill', '#cc0000');
});
});
参见this fiddle一个运行的例子
因此,在您的示例中,此更改应该可以做到:
Template.tabsOne.events({
'click .replaced-svg': function(){
$(this).find('path').attr('fill', 'blue');
}
})
关于javascript - 单击事件更改复杂的 SVG (Meteor),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30194143/