Issue
I have an SVG inlined to html code. Its is scaled to fit width with preserving aspect ratio. Is there a way to set font size fixed to viewport that can be controlled with media queries?
EDIT: The problem is when i set fixed font-size within width range the font is resized anyway relative to svg size.
#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>
Solution
The short answer is no.
If the text is in an SVG with a viewBox
, and the SVG gets scaled, its contents get scaled also. There is no way to make the text have a "global" size that is unaffected by the SVG scaling.
The only possible solution would be calculate the scaling factor using Javascript and dynamically update the font size every time the SVG size changed.
Answered By - Paul LeBeau
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.