Question

我正在使用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为单位，因为这是使用视图框设置的默认单位。

Answer 1

它产生的效果不是一个明显的效果。 SVG节点的height和width值正在对整个绘图进行缩放。

<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>

SVG字体大小无效

1 个答案: