1

Is there a way to insert an icon (PNG or SVG format) at the corner of a <rect> from a SVG file ? Or do I have to create an <image> element and insert it at the appropriate place in my SVG file using javascript ?

For example, in my SVG I have several <rect> whose I set the app class using javascript :

// 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"/>
 */

And now some 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)
    */
}

By the way, here, if I just use .app instead of .app:not(:hover), it's not working. Any idea why ? (I also have css properties for .appContainer:hover .app and .appContainer:hover.)

Ellone
  • 3,644
  • 12
  • 40
  • 72
  • 1
    CSS can only style what's there. I really don't understand what you are trying to do. It certainly can't add actual code to an SVG. – Paulie_D May 22 '15 at 12:33
  • It can't, but CSS can insert image into a page or as an element background using `url()`and more. I was looking for something like that to apply to my rect for the appropriate effect I'm looking for. – Ellone May 22 '15 at 12:40
  • Apparently not - http://stackoverflow.com/questions/10736946/how-to-set-a-svg-rect-elements-background-image – Paulie_D May 22 '15 at 12:47

0 Answers0