Question

我正在尝试创造一个游戏（中世纪概念），但我仍然坚持形成盾牌。我希望每个殖民地都有自己独特的盾牌，其中包括：

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

我已经使用photoshop创建了盾形。每个盾形都有边框，内外都是透明的。我的目标是每个用户都能够选择模式，2种颜色和盾牌的象征，这将代表他的派系。

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

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

所以我的问题是：

当有人点击盾牌图标时，如何正确显示图片？为了通过单击下面的一个较小的形状来更改主屏蔽，我使用了以下jquery代码，但由于一些无法解释的原因，它在小提琴上不起作用，而它在我的本地服务器上正常工作。
```
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。我创建了一个小提琴，但由于我不知道如何将它包含在这里，我将把它添加到我的下一个评论中。

Answer 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);
        });
    });
});

当任何id以“shield_”单击开始时，变量“mysrc”得到他的src属性，然后将类“modal-shield”img改为“myscr”值。希望有人帮忙...

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

1 个答案: