Question

有没有办法在SVG文件的<rect>一角插入一个图标（PNG或SVG格式）？或者我是否必须创建<image>元素并使用javascript将其插入SVG文件中的适当位置？

例如，在我的SVG中，我有几个<rect>，我使用javascript设置了app类：

// before my js manipulation
<rect x="0" y="1597.18" width="113.386" height="86.5984" class="st56"/>

 /*
 ** After my js manipulation this line would become :
 ** <rect x="0" y="1597.18" width="113.386" height="86.5984" class="st56 app"/>
 */

现在有些CSS：

.app:not(:hover) {
    stroke: #ff0000;
    stroke-width: 2;
    /*
    ** Can we add something here in order to add an image into the corner of the rect
    ** (.app is always a rect)
    */
}

顺便说一句，在这里，如果我只使用.app代替.app:not(:hover)，那么它就不起作用了。知道为什么吗？（我还有.appContainer:hover .app和.appContainer:hover的css属性。）

仅使用CSS将图标插入SVG矩形

0 个答案: