css - css 调试表格单元格内内联块 svgs 的响应高度

Question

我需要帮助调试这个 css 问题，因为我发现无法解决这个问题。

css 很重，因为我已经发布了大部分内容以复制问题。

这是问题的小提琴。在小提琴中，您将看到两个相同的板。一个在 a 外面table，一个在 a 里面table td。

桌子外的盘子工作完美且反应灵敏。

表 td 内的盘子，高度.char不是父级的 100%，它的高度是从哪里得到的？

https://jsfiddle.net/joshmoto/2wnrchLu/4/

---

这是它现在的样子，.chars高度超过100％。

SVG 字符.char在名为.plate-chars. 请参阅下面.plate-chars在控制台中突出显示的容器...

这就是现在桌子里面的盘子的样子……

.char {
    display: inline-block;
    height: 100%;
    margin-left: -0.5%;
}

在我网站的前端，这适用于任何响应宽度......

桌面...

移动的...

如果有人可以帮助我找出我提供的小提琴中的 css 冲突或缺少的样式来修复，那将是一个巨大的帮助。

我只是想将每个 SVG 的高度设置.char为父.plate-chars高度的 100%。

我不明白他们现在的身高是从哪里来的？如果有人可以通过我小提琴中的控制台调试它，我只需要知道丢失的链接，那就太好了。

如果有人能解决这个问题，请提前感谢:-)

---

作为我沮丧的一个例子，如果我在我的小提琴.char中手动将 SVG类设置100%为实际的当前父 div 高度......

.plate-builder-preview .plate-standard-uk-car .front .char, .plate-builder-preview .plate-standard-uk-car .rear .char {
    height: 81.86px;
    margin-left: -0.5%;
}

结果看起来很甜蜜......但并不完全响应

只是无法理解为什么SVGheight: 100%;上.char的不正确..？

https://jsfiddle.net/joshmoto/2wnrchLu/4/

标签： csssvg

Answer 1

这就是我的做法：我会将所有字母作为符号放在不同的 svg 中（下一个示例中的第一个 svg 元素）。这个 svg 元素可能有 width="0" height="0" 并将position:absolute;left:-10em;其扔出屏幕

在字母 U 的情况下，您不需要重复该符号两次，因为您将使用它<use>并且您可以根据需要多次重复。

接下来是您使用这些符号的板 svg。

请注意 use 元素的宽度和高度如下所示：如果符号是viewBox="0 0 178.34 314.22"use 元素的宽度178.34和高度是314.22。x 属性值是前面字母宽度的总和。

svg{border:solid;}
path{fill:black}
polygon{fill:none}

<svg width="0" height="0" style="position:absolute;left:-10em;">
<symbol class="char char_l" id="_l" viewBox="0 0 178.34 314.22">
  <g>
    <polygon class="char-jig" points="178.34 314.22 178.34 156.96 172.68 156.96 172.68 0 5.66 0 0 0 0 156.82 5.66 156.82 5.66 314.22 178.34 314.22"></polygon>
    <path class="char-letter" d="M154.28,268.92H24.06a5.65,5.65,0,0,1-5.66-5.66V51a5.66,5.66,0,0,1,5.66-5.66H52.37A5.66,5.66,0,0,1,58,51V224.76a5.66,5.66,0,0,0,5.66,5.67h90.59a5.66,5.66,0,0,1,5.66,5.66v27.17A5.66,5.66,0,0,1,154.28,268.92Z"></path>
  </g>
</symbol>
<symbol class="char char_r" id="_r" viewBox="0 0 178.34 314.22">
  <g>
    <polygon class="char-jig" points="178.34 314.22 178.34 156.96 172.68 156.96 172.68 0 5.66 0 0 0 0 156.82 5.66 156.82 5.66 314.22 178.34 314.22"></polygon>
    <path class="char-letter" d="M151.8,268.92H121.43a5.65,5.65,0,0,1-5.31-3.71L84.87,180.07a5.66,5.66,0,0,0-5.32-3.71H63.69A5.65,5.65,0,0,0,58,182v81.24a5.65,5.65,0,0,1-5.66,5.66H24.06a5.65,5.65,0,0,1-5.66-5.66V51a5.66,5.66,0,0,1,5.66-5.66H109a51,51,0,0,1,51,51v28.87c0,25.86-11.1,42.27-29.21,49a5.64,5.64,0,0,0-3.26,7.24l29.64,79.91A5.66,5.66,0,0,1,151.8,268.92ZM120.31,103.61c0-12.74-7.36-19.82-19.82-19.82H63.69A5.66,5.66,0,0,0,58,89.45V132.2a5.65,5.65,0,0,0,5.66,5.66h36.8A19.82,19.82,0,0,0,120.31,118Z"></path>
  </g>
</symbol>
<symbol class="char char_1" id="_1" viewBox="0 0 76.54 314.65">
  <g>
    <polygon class="char-jig" points="76.53 314.65 76.53 157.32 70.87 157.32 70.87 0 0 0 0 157.32 5.67 157.32 5.67 314.65 76.53 314.65"></polygon>
    <rect class="char-letter" x="18.43" y="45.36" width="39.68" height="223.93" rx="5.67"></rect>
  </g>
</symbol>
<symbol class="char char_4" id="_4" viewBox="0 0 178.58 314.65">
  <g>
    <polygon class="char-jig" points="178.58 314.65 178.58 157.18 172.91 157.18 172.91 0 5.67 0 0 0 0 157.03 5.67 157.03 5.67 314.65 178.58 314.65"></polygon>
    <path class="char-letter" d="M154.49,221.67H141.73a4.25,4.25,0,0,0-4.25,4.25v37.7a5.67,5.67,0,0,1-5.67,5.67H103.47a5.67,5.67,0,0,1-5.67-5.67v-37.7a4.25,4.25,0,0,0-4.26-4.25H24.09A5.66,5.66,0,0,1,18.43,216V186.79a8.49,8.49,0,0,1,1.11-4.21L96.16,48.21a5.69,5.69,0,0,1,4.93-2.86h30.72A5.67,5.67,0,0,1,137.48,51V178.87a4.25,4.25,0,0,0,4.25,4.25h12.76a5.67,5.67,0,0,1,5.67,5.67V216A5.67,5.67,0,0,1,154.49,221.67ZM97.8,178.87V137.65a4.54,4.54,0,0,0-8.52-2.18L66.66,176.83a4.25,4.25,0,0,0,3.73,6.29H93.54A4.25,4.25,0,0,0,97.8,178.87Z"></path>
  </g>
</symbol>
<symbol class="char char_"  id="_" viewBox="0 0 68.08 314.73">
  <g>
    <polygon class="char-jig" points="68.08 314.73 68.08 157.41 62.41 157.41 62.41 0.08 0 0 0 157.32 5.67 157.32 5.67 314.65 68.08 314.73"></polygon>
  </g>
</symbol>
<symbol class="char char_t" id="_t" viewBox="0 0 178.34 314.22">
  <g>
    <polygon class="char-jig" points="178.34 314.22 178.34 156.96 172.68 156.96 172.68 0 5.66 0 0 0 0 156.82 5.66 156.82 5.66 314.22 178.34 314.22"></polygon>
    <path class="char-letter" d="M154.28,83.79H114.65A5.66,5.66,0,0,0,109,89.45V263.26a5.66,5.66,0,0,1-5.67,5.66H75a5.66,5.66,0,0,1-5.67-5.66V89.45a5.66,5.66,0,0,0-5.66-5.66H24.06a5.65,5.65,0,0,1-5.66-5.66V51a5.66,5.66,0,0,1,5.66-5.66H154.28A5.67,5.67,0,0,1,159.94,51V78.13A5.66,5.66,0,0,1,154.28,83.79Z"></path>
  </g>
</symbol>
<symbol class="char char_u" id="_u" viewBox="0 0 178.34 314.22">
  <g>
    <polygon class="char-jig" points="178.34 314.22 178.34 156.96 172.68 156.96 172.68 0 5.66 0 0 0 0 156.82 5.66 156.82 5.66 314.22 178.34 314.22"></polygon>
    <path class="char-letter" d="M159.94,218a51,51,0,0,1-50.95,51H69.35A50.56,50.56,0,0,1,18.4,218V51a5.66,5.66,0,0,1,5.66-5.66H52.37A5.66,5.66,0,0,1,58,51V210.61a19.82,19.82,0,0,0,19.82,19.82h22.64a19.82,19.82,0,0,0,19.82-19.82V51A5.66,5.66,0,0,1,126,45.29h28.31A5.67,5.67,0,0,1,159.94,51Z"></path>
  </g>
</symbol>
<!--<symbol class="char char_u" viewBox="0 0 178.34 314.22">
  <g>
    <polygon class="char-jig" points="178.34 314.22 178.34 156.96 172.68 156.96 172.68 0 5.66 0 0 0 0 156.82 5.66 156.82 5.66 314.22 178.34 314.22"></polygon>
    <path class="char-letter" d="M159.94,218a51,51,0,0,1-50.95,51H69.35A50.56,50.56,0,0,1,18.4,218V51a5.66,5.66,0,0,1,5.66-5.66H52.37A5.66,5.66,0,0,1,58,51V210.61a19.82,19.82,0,0,0,19.82,19.82h22.64a19.82,19.82,0,0,0,19.82-19.82V51A5.66,5.66,0,0,1,126,45.29h28.31A5.67,5.67,0,0,1,159.94,51Z"></path>
  </g>
</symbol>--> 
</svg>



<svg  viewBox="0 0 1215 315">
  <use xlink:href="#_l" width="178.34" height="314.22" />
  <use xlink:href="#_r" width="178.34" height="314.22" x="178.34" />
  <use xlink:href="#_1" width="76.54" height="314.22" x="356.68" />
  <use xlink:href="#_4" width="178.58" height="314.22" x="433.22" />
  <use xlink:href="#_" width="68.08" height="314.22" x="611.8" />
  <use xlink:href="#_t" width="178.34" height="314.22" x="679.88" />
  <use xlink:href="#_u" width="178.34" height="314.22" x="858.22" />
  <use xlink:href="#_u" width="178.34" height="314.22" x="1036.56" />
</svg>