Question

我有一个包装在容器中的SVG图像和一个<template> <form> ... fields to update user property ... <button class="btn btn-primary" :disabled="!isDirty" @click.prevent="submit">Submit</button> <button class="btn btn-default" @click.prevent="user={}">Cancel</button> </form> </template> <script> export default { mounted(){ this.user = this.userObj; }, data(){ return { user: {}, } }, props: ["userObj"], methods: { submit() { this.$emit("formIsSubmitted", this.user); }, } }; </script>包装器。我想更改href上的SVG填充路径。我正在尝试这样做，但是没有用。

hover

我的CSS：

<a class="category" href="#">
<div class="category-item-wrapper">
    <svg class="svg" height="512" width="512" xmlns="http://www.w3.org/2000/svg">
    <g>
        <title>Axle</title>
        <rect fill="none" height="94.592593" id="canvas_background" width="94.592593" x="-1" y="-1"></rect>
    </g>
    <g>
        <path d="m360.007032,159.628358l20.527371,0c4.176861,0 7.594292,-3.417431 7.594292,-7.594292l0,-62.493429c0,-4.176861 -3.417431,-7.594292 -7.594292,-7.594292l-20.527371,0c-4.176861,0 -7.594292,3.417431 -7.594292,7.594292l0,16.95046l-66.100718,0c-4.780607,-8.251198 -13.684914,-13.817814 -23.906831,-13.817814s-19.126224,5.566616 -23.906831,13.817814l-66.039963,0l0,-16.95046c0,-4.176861 -3.417431,-7.594292 -7.594292,-7.594292l-20.527371,0c-4.176861,0 -7.594292,3.417431 -7.594292,7.594292l0,62.493429c0,4.176861 3.417431,7.594292 7.594292,7.594292l20.527371,0c4.176861,0 7.594292,-3.417431 7.594292,-7.594292l0,-16.851734l66.685478,0c2.266896,3.53894 5.319802,6.512105 8.911902,8.703059l0,113.4891c-20.884303,6.185551 -36.133641,25.490241 -36.133641,48.383234c0,22.892993 15.249338,42.197684 36.133641,48.383234l0,7.431015c-3.945235,2.407391 -7.23736,5.764068 -9.557417,9.76626l-66.039963,0l0,-16.95046c0,-4.176861 -3.417431,-7.594292 -7.594292,-7.594292l-20.527371,0c-4.176861,0 -7.594292,3.417431 -7.594292,7.594292l0,62.493429c0,4.176861 3.417431,7.594292 7.594292,7.594292l20.527371,0c4.176861,0 7.594292,-3.417431 7.594292,-7.594292l0,-16.847937l66.685478,0c4.913507,7.670235 13.483665,12.758411 23.261316,12.758411s18.34781,-5.091973 23.261316,-12.754613l66.75003,0l0,16.847937c0,4.176861 3.417431,7.594292 7.594292,7.594292l20.527371,0c4.176861,0 7.594292,-3.417431 7.594292,-7.594292l0,-62.489632c0,-4.176861 -3.417431,-7.594292 -7.594292,-7.594292l-20.527371,0c-4.176861,0 -7.594292,3.417431 -7.594292,7.594292l0,16.95046l-66.104515,0c-2.320056,-4.005989 -5.612182,-7.358869 -9.557417,-9.76626l0,-7.431015c20.884303,-6.185551 36.133641,-25.490241 36.133641,-48.383234c0,-22.892993 -15.249338,-42.197684 -36.133641,-48.383234l0,-113.492897c3.5921,-2.190953 6.645006,-5.164119 8.911902,-8.703059l66.75003,0l0,16.851734c-0.003797,4.173063 3.413634,7.590495 7.590495,7.590495zm-71.538231,146.133164c0,14.394981 -11.66863,26.06361 -26.06361,26.06361s-26.06361,-11.66863 -26.06361,-26.06361c0,-14.394981 11.66863,-26.06361 26.06361,-26.06361s26.06361,11.66863 26.06361,26.06361z" fill="#143856" id="svg_1" stroke="null"></path>
    </g></svg> <span>Axle</span>
</div>
</a>

任何建议将不胜感激。

Answer 1

.category .svg：悬停路径{fill：red;}

Answer 2

.category:hover svg #svg_1 {
    fill: red !important;
}

.category svg #svg_1 {
    transition: .5s all;
}

<a class="category" href="#">
<div class="category-item-wrapper">
    <svg class="svg" height="512" width="512" xmlns="http://www.w3.org/2000/svg">
    <g>
        <title>Axle</title>
        <rect fill="none" height="94.592593" id="canvas_background" width="94.592593" x="-1" y="-1"></rect>
    </g>
    <g>
        <path d="m360.007032,159.628358l20.527371,0c4.176861,0 7.594292,-3.417431 7.594292,-7.594292l0,-62.493429c0,-4.176861 -3.417431,-7.594292 -7.594292,-7.594292l-20.527371,0c-4.176861,0 -7.594292,3.417431 -7.594292,7.594292l0,16.95046l-66.100718,0c-4.780607,-8.251198 -13.684914,-13.817814 -23.906831,-13.817814s-19.126224,5.566616 -23.906831,13.817814l-66.039963,0l0,-16.95046c0,-4.176861 -3.417431,-7.594292 -7.594292,-7.594292l-20.527371,0c-4.176861,0 -7.594292,3.417431 -7.594292,7.594292l0,62.493429c0,4.176861 3.417431,7.594292 7.594292,7.594292l20.527371,0c4.176861,0 7.594292,-3.417431 7.594292,-7.594292l0,-16.851734l66.685478,0c2.266896,3.53894 5.319802,6.512105 8.911902,8.703059l0,113.4891c-20.884303,6.185551 -36.133641,25.490241 -36.133641,48.383234c0,22.892993 15.249338,42.197684 36.133641,48.383234l0,7.431015c-3.945235,2.407391 -7.23736,5.764068 -9.557417,9.76626l-66.039963,0l0,-16.95046c0,-4.176861 -3.417431,-7.594292 -7.594292,-7.594292l-20.527371,0c-4.176861,0 -7.594292,3.417431 -7.594292,7.594292l0,62.493429c0,4.176861 3.417431,7.594292 7.594292,7.594292l20.527371,0c4.176861,0 7.594292,-3.417431 7.594292,-7.594292l0,-16.847937l66.685478,0c4.913507,7.670235 13.483665,12.758411 23.261316,12.758411s18.34781,-5.091973 23.261316,-12.754613l66.75003,0l0,16.847937c0,4.176861 3.417431,7.594292 7.594292,7.594292l20.527371,0c4.176861,0 7.594292,-3.417431 7.594292,-7.594292l0,-62.489632c0,-4.176861 -3.417431,-7.594292 -7.594292,-7.594292l-20.527371,0c-4.176861,0 -7.594292,3.417431 -7.594292,7.594292l0,16.95046l-66.104515,0c-2.320056,-4.005989 -5.612182,-7.358869 -9.557417,-9.76626l0,-7.431015c20.884303,-6.185551 36.133641,-25.490241 36.133641,-48.383234c0,-22.892993 -15.249338,-42.197684 -36.133641,-48.383234l0,-113.492897c3.5921,-2.190953 6.645006,-5.164119 8.911902,-8.703059l66.75003,0l0,16.851734c-0.003797,4.173063 3.413634,7.590495 7.590495,7.590495zm-71.538231,146.133164c0,14.394981 -11.66863,26.06361 -26.06361,26.06361s-26.06361,-11.66863 -26.06361,-26.06361c0,-14.394981 11.66863,-26.06361 26.06361,-26.06361s26.06361,11.66863 26.06361,26.06361z" fill="#143856" id="svg_1" stroke="null"></path>
    </g></svg> <span>Axle</span>
</div>
</a>

悬停时更改SVG填充

2 个答案: