2017-04-25 230 views
0

我有一個SVG內聯到html代碼。它的尺寸適合於保持寬高比的寬度。有沒有辦法將字體大小固定到可以通過媒體查詢控制的視口?svg固定字體大小

編輯: 問題是,當我設置固定的字體大小的寬度範圍內的字體被反正相對於SVG大小調整大小。

#svg-container { 
 
    width: 100%; 
 
    padding-bottom: 70%; 
 
    overflow: hidden; 
 
    border: 1px solid red; 
 
} 
 

 
#svg-container svg text tspan { 
 
    font-size: 14px; 
 
} 
 

 

 
@media (min-height: 800px) { 
 
    #svg-container svg text tspan { 
 
    font-size: 50px; 
 
    } 
 
}
<div id="svg-container"> 
 
<svg 
 
    xmlns:dc="http://purl.org/dc/elements/1.1/" 
 
    xmlns:cc="http://creativecommons.org/ns#" 
 
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" 
 
    xmlns:svg="http://www.w3.org/2000/svg" 
 
    xmlns="http://www.w3.org/2000/svg" 
 
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" 
 
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" 
 
    version="1.1" 
 
    viewBox="0 0 500 350" 
 
    data-name="Layer 1" 
 
    id="Layer_1" 
 
    inkscape:version="0.91 r13725" 
 
    sodipodi:docname="Desktop_Enhanced.svg" 
 
    width="100%" 
 
    style="position: absolute; left: 0; top: 0;" 
 
    > 
 
    <sodipodi:namedview 
 
    pagecolor="#ffffff" 
 
    bordercolor="#666666" 
 
    borderopacity="1" 
 
    objecttolerance="10" 
 
    gridtolerance="10" 
 
    guidetolerance="10" 
 
    inkscape:pageopacity="0" 
 
    inkscape:pageshadow="2" 
 
    inkscape:window-width="1280" 
 
    inkscape:window-height="961" 
 
    id="namedview51" 
 
    showgrid="false" 
 
    inkscape:zoom="1.0054235" 
 
    inkscape:cx="231.42799" 
 
    inkscape:cy="361.93137" 
 
    inkscape:window-x="1272" 
 
    inkscape:window-y="-8" 
 
    inkscape:window-maximized="1" 
 
    inkscape:current-layer="Layer_1" 
 
    fit-margin-bottom="150" /> 
 
    <metadata 
 
    id="metadata75"> 
 
    <rdf:RDF> 
 
     <cc:Work 
 
     rdf:about=""> 
 
     <dc:format>image/svg+xml</dc:format> 
 
     <dc:type 
 
      rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> 
 
     <dc:title>Desktop</dc:title> 
 
     </cc:Work> 
 
    </rdf:RDF> 
 
    </metadata> 
 
    <defs 
 
    id="defs3"> 
 
    <style 
 
     id="style5">.cls-1{fill:#da1f26;}.cls-2{fill:#252e43;}.cls-3{fill:#d1d3d4;}</style> 
 
    </defs> 
 
    <title 
 
    id="title7">Desktop</title> 
 
    <polyline 
 
    id="polyline9" 
 
    points="329.4 62.24 343.54 76.39 329.4 90.53" 
 
    class="cls-1" 
 
    style="fill:#da1f26" 
 
    transform="translate(59.579252,-43.513817)" /> 
 
    <polyline 
 
    id="polyline11" 
 
    points="333.56 328.83 347.7 342.97 333.56 357.11" 
 
    class="cls-2" 
 
    style="fill:#252e43" 
 
    transform="translate(59.579252,-43.513817)" /> 
 
    <path 
 
    id="path35" 
 
    d="m 394.84925,294.48618 -25,0 c -57.81,0 -77.28,-34.66 -96.1,-68.18 -15.35,-27.34 -29.86,-53.16 -63.9,-53.16 l -31.27,0 0,10 31.3,0 c 28.19,0 40.7,22.27 55.18,48.06 9.68,17.23 19.69,35.06 35.5,49.13 18.26,16.22 40.93,24.15 69.33,24.15 l 25,0 z" 
 
    class="cls-2" 
 
    inkscape:connector-curvature="0" 
 
    style="fill:#252e43" /> 
 
    <path 
 
    id="path43" 
 
    d="m 390.97925,27.876183 -21.09,0 c -28.4,0 -51.07,7.9 -69.32,24.15 -15.81,14.08 -25.82,31.9 -35.5,49.129997 -14.48,25.79 -27,48.06 -55.18,48.06 l -31.31,0 0,10 31.3,0 c 34,0 48.54,-25.82 63.9,-53.16 18.8,-33.569997 38.3,-68.179997 96.11,-68.179997 l 21.09,0 z" 
 
    class="cls-1" 
 
    inkscape:connector-curvature="0" 
 
    style="fill:#da1f26" /> 
 
    <path 
 
    id="path45" 
 
    d="m 429.38925,17.956183 a 14.92,14.92 0 1 0 14.92,14.92 14.92,14.92 0 0 0 -14.92,-14.92 z m 0,21 a 6.08,6.08 0 1 1 6.08,-6.08 6.08,6.08 0 0 1 -6.08,6.08 z" 
 
    class="cls-1" 
 
    inkscape:connector-curvature="0" 
 
    style="fill:#da1f26" /> 
 
    <path 
 
    id="path47" 
 
    d="m 433.38925,284.53618 a 14.92,14.92 0 1 0 14.92,14.95 14.92,14.92 0 0 0 -14.92,-14.95 z m 0,21 a 6.08,6.08 0 1 1 6.09,-6.05 6.08,6.08 0 0 1 -6.09,6.05 z" 
 
    class="cls-2" 
 
    inkscape:connector-curvature="0" 
 
    style="fill:#252e43" /> 
 
    <flowRoot 
 
    style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" 
 
    id="flowRoot4236" 
 
    xml:space="preserve" 
 
    transform="translate(0,-72.53)"><flowRegion 
 
     id="flowRegion4238"><rect 
 
     y="179.54243" 
 
     x="18.988897" 
 
     height="58.373276" 
 
     width="94.241196" 
 
     id="rect4240" /></flowRegion><flowPara 
 
     id="flowPara4242">ZakładaZ</flowPara></flowRoot> <text 
 
    x="27.791037" 
 
    y="169.90349" 
 
    font-size="20px" 
 
    id="text49-1" 
 
    style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:15px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#252e43;fill-opacity:1" 
 
    sodipodi:linespacing="125%"> 
 
    <tspan 
 
     sodipodi:role="line" 
 
     id="tspan4528" 
 
     x="27.791037" 
 
     y="169.90349">PLEASE CHOOSE</tspan> 
 
    </text> 
 
</svg> 
 

 

 
</div>

回答

2

簡短的答案是否定的。

如果文本在一個帶有viewBox的SVG中,並且SVG被縮放,它的內容也會被縮放。無法使文本具有不受SVG縮放影響的「全局」大小。

唯一可能的解決方案是使用Javascript計算比例因子,並在每次SVG大小發生變化時動態更新字體大小。

0

在端...

我已刪除從SVG文本和加入的div文本塊與共享HTML容器內的絕對定位。這工作熟練。 Div的外觀通過媒體查詢控制在CSS上 - 它與svg縮放無關。