【问题标题】:SVG font-size not having effectSVG字体大小没有效果
【发布时间】:2013-07-13 22:36:04
【问题描述】:

我正在使用 Python 的 svgwrite 库生成这个键盘 SVG。

没有考虑文字大小和文字位置。不考虑相对于字母组的 x 和 y 位置。绝对字体大小在inkscape中显示更大。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xlink="http://www.w3.org/1999/xlink" baseProfile="full" height="297mm" version="1.1" viewBox="0 0 210 297" width="210mm">
  <defs/>
  <g id="kbgroup" transform="translate(10,10)">
    <g id="Q" transform="translate(0,0)">
      <rect fill="black" height="15.0" id="box-Q" stroke="none" stroke-width="0.5" width="12.5" x="0" y="0"/>
      <text style="text-anchor:end;text-align:start;writing-mode:ltr;     font-size:4px; font-family:Bitstream Vera Sans; fill:white" x="2.0" y="5.0">Q</text>
    </g>
    <g id="W" transform="translate(19,0)">
      <rect fill="black" height="15.0" id="box-W" stroke="none" stroke-width="0.5" width="12.5" x="0" y="0"/>
      <text style="text-anchor:end;text-align:start;writing-mode:ltr;     font-size:4px; font-family:Bitstream Vera Sans; fill:white" x="2.0" y="5.0">W</text>
    </g>
    <g id="E" transform="translate(38,0)">
      <rect fill="black" height="15.0" id="box-E" stroke="none" stroke-width="0.5" width="12.5" x="0" y="0"/>
      <text style="text-anchor:end;text-align:start;writing-mode:ltr;     font-size:4px; font-family:Bitstream Vera Sans; fill:white" x="2.0" y="5.0">E</text>
    </g>
    <g id="R" transform="translate(57,0)">
      <rect fill="black" height="15.0" id="box-R" stroke="none" stroke-width="0.5" width="12.5" x="0" y="0"/>
      <text style="text-anchor:end;text-align:start;writing-mode:ltr;     font-size:4px; font-family:Bitstream Vera Sans; fill:white" x="2.0" y="5.0">R</text>
    </g>
    <g id="T" transform="translate(76,0)">
      <rect fill="black" height="15.0" id="box-T" stroke="none" stroke-width="0.5" width="12.5" x="0" y="0"/>
      <text style="text-anchor:end;text-align:start;writing-mode:ltr;     font-size:4px; font-family:Bitstream Vera Sans; fill:white" x="2.0" y="5.0">T</text>
    </g>
    <g id="Y" transform="translate(95,0)">
      <rect fill="black" height="15.0" id="box-Y" stroke="none" stroke-width="0.5" width="12.5" x="0" y="0"/>
      <text style="text-anchor:end;text-align:start;writing-mode:ltr;     font-size:4px; font-family:Bitstream Vera Sans; fill:white" x="2.0" y="5.0">Y</text>
    </g>
  </g>
</svg>

我希望文本大小为以 px 表示的大小。文本相对于组的插入位置必须以无单位表示,因此以 mm 为单位,因为这是使用视图框设置的默认单位。

【问题讨论】:

  • 一个用px单位指定的值和一个没有指定单位的值在svg中表示相同的东西,它是user units,见w3.org/TR/SVG11/coords.html#Units
  • 在inkscape中,矩形是我想要的大小,即12.5 x 15 mm而不是像素。然而,文本被解释为以 mm 为单位的大小,然后乘以 ~3.5。此外,它的位置也不正确。相对于其组的左上角,它应该是 2.5 和 5.0 毫米。如何做到这一点?我所有的尺寸都以毫米为单位,因为这应该适用于我以毫米为单位测量的真实键盘。

标签: python svg


【解决方案1】:

它的效果并不明显。 SVG 节点的heightwidth 值正在整体缩放绘图。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xlink="http://www.w3.org/1999/xlink" baseProfile="full" height="297mm" version="1.1" viewBox="0 0 210 297" width="210mm">

观察当你增加和减少每个字母的font-size,然后是svg 节点的高度和宽度时会发生什么(这里是demo

虽然我确定您在这里寻找的布局是您正在构建的 SVG 的修改版本(没有 mm 作为 svg 节点大小的单位)并且字体稍大居中):(demo

<svg xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xlink="http://www.w3.org/1999/xlink" baseProfile="full" height="297" version="1.1" viewBox="0 0 210 297" width="210">
  <defs/>
  <g id="kbgroup" transform="translate(10,10)">
    <g id="Q" transform="translate(0,0)">
      <rect fill="black" height="15.0" id="box-Q" stroke="none" stroke-width="0.5" width="12.5" x="0" y="0"/>
      <text style="text-anchor:end;text-align:start;writing-mode:ltr;     font-size:8px; font-family:Bitstream Vera Sans; fill:white" y="10" x="9">Q</text>
    </g>
    <g id="W" transform="translate(19,0)">
      <rect fill="black" height="15.0" id="box-W" stroke="none" stroke-width="0.5" width="12.5" x="0" y="0"/>
      <text style="text-anchor:end;text-align:start;writing-mode:ltr;     font-size:8px; font-family:Bitstream Vera Sans; fill:white" y="10" x="9">W</text>
    </g>
    <g id="E" transform="translate(38,0)">
      <rect fill="black" height="15.0" id="box-E" stroke="none" stroke-width="0.5" width="12.5" x="0" y="0"/>
      <text style="text-anchor:end;text-align:start;writing-mode:ltr;     font-size:8px; font-family:Bitstream Vera Sans; fill:white" y="10" x="9">E</text>
    </g>
    <g id="R" transform="translate(57,0)">
      <rect fill="black" height="15.0" id="box-R" stroke="none" stroke-width="0.5" width="12.5" x="0" y="0"/>
      <text style="text-anchor:end;text-align:start;writing-mode:ltr;     font-size:8px; font-family:Bitstream Vera Sans; fill:white" y="10" x="9">R</text>
    </g>
    <g id="T" transform="translate(76,0)">
      <rect fill="black" height="15.0" id="box-T" stroke="none" stroke-width="0.5" width="12.5" x="0" y="0"/>
      <text style="text-anchor:end;text-align:start;writing-mode:ltr;     font-size:8px; font-family:Bitstream Vera Sans; fill:white" y="10" x="9">T</text>
    </g>
    <g id="Y" transform="translate(95,0)">
      <rect fill="black" height="15.0" id="box-Y" stroke="none" stroke-width="0.5" width="12.5" x="0" y="0"/>
      <text style="text-anchor:end;text-align:start;writing-mode:ltr;     font-size:8px; font-family:Bitstream Vera Sans; fill:white" y="10" x="9">Y</text>
    </g>
  </g>
</svg>

【讨论】:

  • 这其实不是我想要的。我没有表达清楚,我很抱歉。我想要的是相对位置以 mm 表示,字体大小以 px 表示。
猜你喜欢
  • 2015-01-05
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-12-16
  • 2014-08-27
  • 1970-01-01
  • 2014-03-03
  • 2011-06-07
相关资源
最近更新 更多