如何在透明图像中使用彩色图案答案

【问题标题】：How to use colored patterns inside transparent image如何在透明图像中使用彩色图案
【发布时间】：2016-08-06 06:43:26
【问题描述】：

我正在尝试创建一个游戏（中世纪概念），但我被困在制作盾牌上。我希望每个殖民地都有自己独特的盾牌，由以下部分组成：

盾牌形状（14 种形状）
图案（12 种图案）
颜色（16 x 2 种颜色，因为每个图案都有 2 种颜色选择）
符号（12 个符号）

我已经使用 Photoshop 创建了盾牌形状。每个盾牌形状都有它的边界，它的内外都是透明的。我的目标是让每个用户都能选择自己的盾牌的图案、2种颜色和符号，这将代表他的阵营。

有一种方法可以创建所有这些不同的组合并使用 css 和 jquery 放置它们，但是这个选项需要大量的彩色图案：

14 种形状 x 12 种图案 x 16x2 种颜色 = 5.376（至少不同颜色的图案）。

所以我的问题是：

当有人点击盾牌图标时，我怎样才能正确显示图片？为了通过单击下面的一个较小的形状来更改主屏蔽，我使用了以下 jquery 代码，但由于某些无法解释的原因，它在 fiddle 上不起作用，而它在我的本地服务器上正常工作。
```
jQuery(function($) {
    $("#shield-1").click(function() {
        $('.modal-shield img').attr('src',function(i,e){
            $(this).attr('src', "path/to-image/shield-1.png");
        });
    });
});         
```
如何根据每个不同的形状在防护罩内部呈现自己的图案？我可以在 css 上使用“溢出”选项来填充他的内部透明部分，然后用 jquery 创建模式吗？
如何更改图案的颜色？
有没有办法将所有这些选项的结果保存为图像，以便以后显示不同尺寸的盾牌？

如果可以的话，我想使用 css 和 Jquery，但是如果这个选项不可行，我可以使用 svg 和 Jquery 吗？

PS。我创建了一个小提琴，但由于我不知道如何在此处包含它，我将其添加到我的下一条评论中。

【问题讨论】：

这就是小提琴jsfiddle.net/snart1/4ef46nro/3
你的问题太宽泛了，对于 Stack Overflow 来说是题外话。尝试解决方案，如果您遇到问题，我们随时为您提供帮助。
很公平...我会尝试一些我找到的解决方案，如果出现任何问题，我会回来的。无论如何，我愿意听取您认为有助于我参与该项目的任何建议或建议..

标签： jquery css svg

【解决方案1】：

对于任何对问题 #1 有相同问题的人，我使用以下更新的 jquery 代码通过单击下面的形状来更改主屏蔽

jQuery(function($) {
    $("[id^='shield-']").click(function() {     
        var mysrc = $(this).attr("src");
        $('.modal-shield img').attr('src',function(i,e){            
            $(this).attr('src', mysrc);
        });
    });
});

当点击任何以“shield_”开头的id时，变量“mysrc”获取他的src属性，然后用“myscr”值更改类“modal-shield”img.. 希望对某人有所帮助...

【讨论】：