title: nested svg inherited sizes
body: <p>Two mysteries, or maybe they are the same. All the rectangles in the below are filling in for graphics, which have been removed to simplify the description.</p>
  
  <p>Mystery #1: A height for #mbfluid is given, but it is not honored. The #mbfluid rectangle should grow dynamically based on the width of #mbsvg. So mystery #1 is why the height is not honored. </p>
  
  <p>Note that if I give explicit widths for either or both #mbsvg in the CSS or #mbfluid as an attribute, the height is still not honored. Note that the syntax for the height specification for #mbfluid is exactly the same as for #mbfixed which is the expected height. I expected the width of #mbsvg to be the same as its parent, and that would be OK... but in the debugger, #mbfluid is reported as having a huge width. But specifying a width for it doesn't seem to fix the height. Submystery #1 would be how to specify the width of #mbfluid so that it starts 10pt from the left, and extends to the right edge of the containing #mbsvg. I don't think I can use CSS calc for this as width cannot presently be specified via CSS, and I didn't find a similar capability for SVG attributes. But if the height can be fixed, I don't probably care much about the width, as long as it is big enough.</p>
  
  <p>Mystery #2: #mbsvg has a couple sibling divs containing nowrap text. I would like #mbsvg to be the same width as whichever line of text is wider. Multiple instances of #mbsvg will be used with different lines of text, having different widths, and I'm trying to make one #mbsvg that can work in those different locations. I've no idea how to specify the CSS to cause the size of #mbsvg to inherit the size of the wider of the two lines of text. A javascript solution would suffer from the multitude of such groupings expected to be on the page (maybe 500 on the biggest page), and further, the lines of text may be individually switched on and off (one or both being visible) using CSS, so the javascript would have to be rerun, and know which ones are visible, in order to discover the proper size to make the #mbsvg. This system is already functioning nicely, with a fixed-width variety of the #mbsvg, but the responsive #mbsvg would make it much more attractive.</p>
  
  <p><strong>Edit:</strong> (regarding Mystery #1) Experimenting more, tried making the height bigger, and exactly 10 times bigger displayed as desired. But <a href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttributeEffectOnSiblingAttributes" rel="nofollow">this link</a> says that x, y, height, and width attributes use the parent coordinate space, so this looks like a bug... but if so, it is in all the browsers (and at least IE doesn't share all the same SVG code, because it shows a wider #mbsvg, and doesn't crop #mbfluid to the boundary of #mbsvg), because they all show it. The only factor of 10 nearby is in the viewbox aspect ratio, and changing that has an impact, in spite of what it says at the link, which is supposed to be the standard. So now the problem is if I workaround this, how can I do it so that it is immune to the browser vendors fixing this bug (at least, it presently seems to me to be a bug)?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.mbsvg
  {
  position: relative;
  height: 49pt;
  background-color: #80ffff;
  }
  .mbsized
  {
  height: 100%;
  }
  .nowrap
  {
  white-space: nowrap;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg height="0"&gt;&lt;defs&gt;
   &lt;rect id="r1" x="0" y="0" height="10" width="10" /&gt;
   &lt;rect id="r2" x="0" y="0" height="10" width="100" /&gt;
   &lt;rect id="r3" x="0" y="0" height="250" width="85" /&gt;
  &lt;/defs&gt;&lt;/svg&gt;
  &lt;div&gt;
    &lt;div class="nowrap"&gt;This is some text&lt;/div&gt;
    &lt;div class="nowrap"&gt;This is some other text&lt;/div&gt;
    &lt;svg class="mbsvg"&gt;
     &lt;use xlink:href="#r1" fill="red"/&gt;
     &lt;svg class="mbfluid" x="10pt" y="16pt" height="17pt"
       viewbox="0 0 10 100" preserveAspectRatio="none"&gt;
      &lt;use xlink:href="#r2" fill="yellow"/&gt;
     &lt;/svg&gt;
     &lt;svg class="mbfixed" x="0" y="16pt" height="17pt" width="10pt"
       viewbox="0 0 10 10" preserveAspectRatio="none"&gt;
      &lt;use xlink:href="#r1" fill="blue"/&gt;
     &lt;/svg&gt;
     &lt;svg class="mbsized"
       viewbox="0 0 83 250" preserveAspectRatio="xMidYMid meet"&gt;
      &lt;use xlink:href="#r3" fill="green"/&gt;
     &lt;/svg&gt;
    &lt;/svg&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>