SVG字體大小沒有影響

我使用Python的svgwrite庫生成此鍵盤SVG。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爲單位，因爲這是使用視圖框設置的默認單位。

來源

2013-07-15 Ben Kaizer

用'px'單位指定的值和沒有指定單位的值表示svg中的相同值，它是'user units'，請參閱http://www.w3.org/TR/SVG11/coords.html#Units。 –

在Inkscape中，矩形是我想要的尺寸，即12.5 x 15毫米，而不是像素。然而，文本被解釋爲以mm爲單位的大小，然後乘以〜3.5。另外，它的位置不正確。它應該是2.5和5.0毫米相對於其左上角的組。如何實現這一目標？我有的所有尺寸都是mm，因爲這應該適用於我用mm測量的真實鍵盤。 –

它只是一個不明顯的效果。 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>

來源

2013-07-15 22:20:55

這實際上並不是我想要的。我沒有表達清楚，我的歉意。我想要的是相對位置用mm表示，字體大小用px表示。 –

SVG字體大小沒有影響

回答

相關問題