Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>You can not address an element that is referenced via use. <a href="http://www.w3.org/TR/SVG11/struct.html#UseElement" rel="noreferrer">The specs</a> say:</p> <blockquote> <p>For user agents that support Styling with CSS, the conceptual deep cloning of the referenced element into a non-exposed DOM tree also copies any property values resulting from the CSS cascade ([CSS2], chapter 6) on the referenced element and its contents. CSS2 selectors can be applied to the original (i.e., referenced) elements because they are part of the formal document structure. CSS2 selectors cannot be applied to the (conceptually) cloned DOM tree because its contents are not part of the formal document structure.</p> </blockquote> <p>Nevertheless, Firefox supports addressing "virtual" elements the are included via a use wormhole. All other browsers don't.</p> <p>What more browser do support is changing filling or stroking color if you give the referenced element a fill/stroke value of <code>currentColor</code> and then you change the <code>color</code> property of the <code>&lt;use&gt;</code> element on hover. Like so:</p> <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg version="1.1" width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt; &lt;style type="text/css"&gt; #p0 {fill:currentColor} #use1:hover {color:green} #use2:hover {color:red} #use3:hover {color:blue} &lt;/style&gt; &lt;defs&gt; &lt;polygon id="p0" points="100,0 50,86.6 -50,86.6 -100,0 -50,-86.6 50,-86.6" class="active" /&gt; &lt;/defs&gt; &lt;g transform="translate(70,100)"&gt; &lt;use xlink:href="#p0" transform="translate(40,0)" id="use1" /&gt; &lt;use xlink:href="#p0" transform="translate(250,0)" id="use2" /&gt; &lt;use xlink:href="#p0" transform="translate(460,0)" id="use3" /&gt; &lt;/g&gt; &lt;/svg&gt;</code></pre> </div> </div> </p> <p>This is supported by all major browsers (FF, Chrome, IE, Safari). Only Opera doesn't seem to like it. The disadvantage is of course, with this method you can only change one color.</p> <p>So, a different method would possible be to use filters, if it's only about changing color. For example using <code>&lt;feColorMatrix&gt;</code>, you can transform one color to another using a color matrix, like this:</p> <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg version="1.1" width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt; &lt;style type="text/css"&gt; #p0 {fill: currentColor} #use1:hover {filter: url(#filter1)} #use2:hover {filter: url(#filter2)} #use3:hover {filter: url(#filter3)} &lt;/style&gt; &lt;defs&gt; &lt;g id="p0"&gt; &lt;polygon points="100,0 50,86.6 -50,86.6 -100,0 -50,-86.6 50,-86.6" fill="red" /&gt; &lt;rect width="50" height="70" fill="green" /&gt; &lt;circle cx="-20" cy="-30" r="30" fill="blue" /&gt; &lt;/g&gt; &lt;/defs&gt; &lt;filter id="filter1"&gt; &lt;feColorMatrix type="matrix" in="SourceGraphic" values="0 1 0 0 0 1 0 0 0 0 0 0 1 0 0 0 0 0 1 0" /&gt; &lt;/filter&gt; &lt;filter id="filter2"&gt; &lt;feColorMatrix type="matrix" in="SourceGraphic" values="0 0 1 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0 1 0" /&gt; &lt;/filter&gt; &lt;filter id="filter3"&gt; &lt;feColorMatrix type="matrix" in="SourceGraphic" values="0 1 0 0 0 0 0 1 0 0 1 0 0 0 0 0 0 0 1 0" /&gt; &lt;/filter&gt; &lt;g transform="translate(70,100)"&gt; &lt;use xlink:href="#p0" transform="translate(40,0)" id="use1" /&gt; &lt;use xlink:href="#p0" transform="translate(250,0)" id="use2" /&gt; &lt;use xlink:href="#p0" transform="translate(460,0)" id="use3" /&gt; &lt;/g&gt; &lt;/svg&gt;</code></pre> </div> </div> </p> <p>Still no luck with Opera, though, and this time I wasn't happy with IE9 and Safari either. But I believe it should be possible with Opera and Safari, only I did something not 100% correctly.</p>
    singulars
    1. This table or related slice is empty.
    1. POSVG USE element and :hover style
      singulars
      1. PTQuestion
    1. PTAnswer
    1. This table or related slice is empty.
    1. USThomas W
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COYou're right. It doesn't work in Opera. I've updated my question a little bit to describe further what I want to get.
      singulars
      1. PO
      1. USSasQ
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload