如何使用捕捉来填充SVG中整组元素的颜色

时间:2016-11-26 20:05:43

标签: javascript jquery css svg snap.svg

我想为SVG图像填充整组元素的颜色。我已将我的元素与此标记一起分组

SELECT *
FROM soldiers s LEFT JOIN
     soldier_tag st
     ON s.id = st.soldier_id
WHERE st.tag_id IN (5,7);

现在我想在我的网页上有一个按钮,当我点击特定事件,然后单击该按钮时,整个元素组将填充由该事件决定的特定颜色。我已经完成了这个功能

<g id="calendar">
<path d="M265.8,631.3l-26.7,8c1.7,5.4,3.5,10.8,5.6,16l26,-9.9c-1.8,-4.6,-3.4,-9.3,-4.9,-14.1Z" class="g1_1"value="2013-10-15"></path>
<path d="M528,769.2l8,26.7c5.5,-1.7,10.8,-3.6,16,-5.6l-10,-26c-4.6,1.8,-9.3,3.4,-14,4.9Z" class="g1_1"></path>
<path d="M212.6,647.2l-39.7,11.9c2.2,7.1,4.6,14.1,7.3,21l38.7,-14.9c-2.3,-5.9,-4.4,-11.9,-6.3,-18Z" class="g1_1"value="2013-10-01"></path>
<path d="M387.3,316.5L375.4,276.8c-7.1,2.2,-14.1,4.6,-21,7.3l14.9,38.7c5.9,-2.3,11.9,-4.4,18,-6.3Z" class="g1_1" value="2013-07-02"></path>
</g>

但我不知道如何填充SVG中整组元素的颜色。任何人都可以教我如何做到这一点? (现在我尝试了新方法,错误消失了,但它没有用)

1 个答案:

答案 0 :(得分:0)

如果您想点击一件事并将所有路径更改为一种颜色,请执行以下操作:

import java.io.File;
import java.io.IOException;
import java.util.Scanner;

public class WordCounter {

    private static Scanner input;

    public static void main(String[] args) {

        if(args.length == 0) {
            System.out.println("File name not specified.");
            System.exit(1);
        }

        try {
            File file = new File(args[0]);
            input = new Scanner(file);
        } catch (IOException ioException) {
            System.err.println("Cannot open file.");
            System.exit(1);
        }

        int total = 0;
        while (input.hasNext()) {
            total += 1;
            input.next();
        }

        System.out.printf("The total number of words without duplication is: %d", total);

        input.close();
    }

}

或单击一件事并改变一件事:

$('#nameofwhattoclick').on("click", function() {
    $('#path1, #path2, #path3').css({ fill: "#ffffff" });
});

填充:#ffffff替换为您的颜色, path1,path2,path3替换为路径名称

进行组更改的唯一方法是使用*选择器的css,但是你只能使用不包含点击的可用动态伪类

$('#nameofwhattoclick1').on("click", function() {
    $('#path1').css({ fill: "#000000" });
});
$('#nameofwhattoclick2').on("click", function() {
    $('#path2').css({ fill: "#000000" });
});