14

I'm using svg with viewBox for fit to the container its working fine ,when i resize the container the svg circle and text are resizing and fit to container but i don't want to resize the text fontSize when i resize the container.I searched a lot but didn't find any valuable suggestions.

I need to resize div and svg circle should resize but text should not resize the font size and also text should move to along with the circle.

Any suggestions should be appreciated.

The following is the SVG i'm using in my application

<div id="container">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 920 620" preserveAspectRatio="none" style="overflow: hidden; position: relative;">
        <circle cx="100" cy="100" r="100" fill="green"></circle>
        <text x="100" y="100" text-anchor="middle" font="18px &quot;Arial&quot;" stroke="none" fill="#000000" font-size="20px" font-style="italic" font-weight="800" font-family="Times New Roman" opacity="1.0" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-style: italic; font-variant: normal; font-weight: 800; font-size: 18px; line-height: normal; font-family: 'Times New Roman'; opacity: 1;">
            <tspan dy="5.828125" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Circle</tspan>
        </text>
        </svg>
</div>

Here is the Demo

Note: Resize the jsFiddle

1
  • In this demo I supply some JavaScript that can dynamically modify the transforms on selected elements to keep them scale independent as the page zooms.
    – Phrogz
    Commented Aug 13, 2013 at 23:25

2 Answers 2

3

Move the viewbox out of the root svg tag and into a nested svg tag. Put the text outside the nested svg tag and the viewbox will not affect the text tag

<div id="container">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative;">
        <svg viewBox="0 0 920 620" preserveAspectRatio="none">
            <circle cx="100" cy="100" r="100" fill="green"></circle>
        </svg>
        <text x="100" y="100" text-anchor="middle" font="18px &quot;Arial&quot;" stroke="none" fill="#000000" font-size="20px" font-style="italic" font-weight="800" font-family="Times New Roman" opacity="1.0" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-style: italic; font-variant: normal; font-weight: 800; font-size: 18px; line-height: normal; font-family: 'Times New Roman'; opacity: 1;">
            <tspan dy="5.828125" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Circle</tspan>
        </text>
</svg>

Example

3
  • 4
    The example doesn't seem to fix the issue. Text still shrinks as the circle shrinks. Commented Jul 21, 2016 at 20:37
  • @JohnathanElmore that doesn't seem to be my experience. Did you open the Example link? Reducing the value of rx does not change the size of the text. At some point, the text even extends beyond the circle's border.
    – Brandon
    Commented Aug 5, 2020 at 21:03
  • @Brandon The fiddle you linked and the code from your answer aren't the same. In the fiddle there is no nested svg, it's just one with both the circle and text. Maybe that's where the confusion is coming from.
    – duxk.gh
    Commented Feb 9, 2021 at 15:17
0

Sorry. There isn't a way to do what you want. There is a feature of SVG 1.2 called TransformRef (http://www.w3.org/TR/SVGTiny12/coords.html#transform-ref) which could be useful in theis situation, but sadly it is not supported by any of the browsers AFAIK.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.