Databases
StackOverflow2013
Postsdbo
POHow do you style svg tags using css?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow do you style svg tags using css?
    primarykey
    data
    text
    <p>I am trying to use an inline style tag to style my 45 polygons and 5 rectangles. for some reason the first tag that i try to style does not pick up the styling. If I add a third shape at the top then the two underneath it get styled, if I removed the third shape at the top then the second one under it will not be styled. Has this happened to anyone before? </p> <pre><code>&lt;style type="text/css"&gt;&lt;![CDATA[ &lt;!--this rectangle will not be styled --&gt; rect{ fill:none; stroke:black; stroke-width:.5; } polygon{ fill:none; stroke:black; stroke-width:.5; } ]]&gt;&lt;/style&gt; </code></pre> <p>Now using the code below, the rectangle gets styled. (with the second polygon tag at the top)</p> <pre><code>&lt;style type="text/css"&gt;&lt;![CDATA[ polygon{ fill:none; stroke:black; stroke-width:.5; } rect{ fill:none; stroke:black; stroke-width:.5; } polygon{ fill:none; stroke:black; stroke-width:.5; } ]]&gt;&lt;/style&gt; &lt;svg width="400" height="800" viewBox="0 0 400 800" id="svg-doc"&gt; &lt;rect id="central-park" class="shape" x="154" y="370"width="53" height="127" /&gt; &lt;rect id="shape-z10024" class="shape" x="68" y="415" width="85" height="40" /&gt; &lt;rect id="shape-z10023" class="shape" x="68" y="457" width="85" height="40" /&gt; &lt;polygon id="shape-z10034" class="shape" points="189,156 137,122 106,121 101,129 99,155 79,155 78,105 94,79 121,67 128,82 163,61 177,62 191,80" /&gt; &lt;a xlink:href="http://google.com/"&gt; &lt;polygon id="shape-z10040" class="shape" points="188,167 186,155 137,122 108,122 102,126 100,153 77,156 77,166" /&gt; &lt;/a&gt; &lt;polygon id="shape-z10033" class="shape" points="189,166 187,197 187,203 81,203 77,194 78,166" /&gt; &lt;polygon id="shape-z10032" class="shape" points="189,205 160,234 155,248 84,247 80,204" /&gt; &lt;polygon id="shape-z10030" class="shape" points="268,311 196,315 197,299 157,298 157,273 234,273" /&gt; &lt;/svg&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. UScdm89
    1. UScdm89
    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. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow do you style svg tags using css?
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POHow do you style svg tags using css?
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POHow do you style svg tags using css?
      1. This table or related slice is empty.
      1. VTUpMod
    1. COCan you set up a [jsfiddle](http://jsfiddle.net/) for this?
      singulars
      1. POHow do you style svg tags using css?
      1. USmiah
    2. COWhy do you have an XML comment in `<style>` tags? Is it there in your actual stylesheet? Also, try wrapping your CDATA delimiters in CSS comments (not XML comments). Also, need to see your SVG markup.
      singulars
      1. POHow do you style svg tags using css?
      1. USBoltClock
    3. CO@BoltClock I was just following the manual online, not really sure why it was needed but i saw that thats what they used to do an inline style sheet. I added my markup as well, thanks for your help
      singulars
      1. POHow do you style svg tags using css?
      1. UScdm89
 

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