Question

我想知道是否可以定位位于SVG中的下面的图像标记，并使用CSS在外部设置样式。

<g id="Vector_Smart_Object_xA0_Image_1_" class="trapSVG" >

        <image style="overflow:visible;" width="15" height="15" id="Vector_Smart_Object_xA0_Image" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAA
        GXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAZlJREFUeNqcUz1LA0EQfbN3SYwf
        +IEWBpSQRhAtLCy0EWws/QGCP8JKbEUri1QWaiEGLewsbQQb2xQJNoKIQgwqaooEk0t2nDlyEE1C
        jAOzO+x7b3Znd5bQbEZ8zgVmZR6vAhGJyxI/S5yROS1uA7L7SzwWAtY8YHmSzGycKBYBhcvgygNz
        7p5tRvArwU+F+6oCahQ7wNYQ0fqqcUcWyUGCDHoFKImLGDdcw4Wtvn8yn9SA3SCJf2w5yvYwUXnH
        jdjHcD9zeKDJdV1x5Sm/Xq5v8xK9bzhhW2whbHTFlad81TmqlmEzBlo6DEVp9EdVzSZ3gGnj0HnN
        ixaBL1O/iJUlKWKigzgw5SlfdX4CeZP4DBl0Y8pXXXeqNk2jw0OWbVdC5avOT8DA5bWt4kmjP5jy
        lK86P4E0RSoH/kjWKlzqIFZcecpXnVNfz0vQdwu7YAgmToYGW7yI7nxgPd63niftnJSiz4IEegNZ
        WexJs53Kg6NvQi4I8CLznfiVtHHKeji23keB+Uh23xO4SO0+U+Ifn+lf3/lbgAEAuN/KQ8s2cHgA
        AAAASUVORK5CYII=" transform="matrix(0.75 0 0 0.75 913.5 276.75)">
    </image>
</g>
</svg>

Answer 1

当然，如果您使用的是内联SVG。

#Vector_Smart_Object_xA0_Image {
  transform: rotate(45deg);
}

#svg-rect {
  fill: transparent;
  stroke: gray;
  stroke-width: .5px;
  transition: fill .25s;
}

#svg-rect:hover {
  fill: yellow;
}

<g id="Vector_Smart_Object_xA0_Image_1_" class="trapSVG" >
   <image style="overflow:visible;" width="15" height="15" id="Vector_Smart_Object_xA0_Image" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAA
        GXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAZlJREFUeNqcUz1LA0EQfbN3SYwf
        +IEWBpSQRhAtLCy0EWws/QGCP8JKbEUri1QWaiEGLewsbQQb2xQJNoKIQgwqaooEk0t2nDlyEE1C
        jAOzO+x7b3Znd5bQbEZ8zgVmZR6vAhGJyxI/S5yROS1uA7L7SzwWAtY8YHmSzGycKBYBhcvgygNz
        7p5tRvArwU+F+6oCahQ7wNYQ0fqqcUcWyUGCDHoFKImLGDdcw4Wtvn8yn9SA3SCJf2w5yvYwUXnH
        jdjHcD9zeKDJdV1x5Sm/Xq5v8xK9bzhhW2whbHTFlad81TmqlmEzBlo6DEVp9EdVzSZ3gGnj0HnN
        ixaBL1O/iJUlKWKigzgw5SlfdX4CeZP4DBl0Y8pXXXeqNk2jw0OWbVdC5avOT8DA5bWt4kmjP5jy
        lK86P4E0RSoH/kjWKlzqIFZcecpXnVNfz0vQdwu7YAgmToYGW7yI7nxgPd63niftnJSiz4IEegNZ
        WexJs53Kg6NvQi4I8CLznfiVtHHKeji23keB+Uh23xO4SO0+U+Ifn+lf3/lbgAEAuN/KQ8s2cHgA
        AAAASUVORK5CYII=" transform="matrix(0.75 0 0 0.75 913.5 276.75)">
    </image>
</g>
</svg>

<svg width="20" height="20">
  <rect id="svg-rect" width="15" height="15" x="2" y="2"></rect>
</svg>

这只是示例图片吗？使用SVG rect元素要简单得多。

如何在SVG中设置图像标签的样式？

1 个答案: