svg viewbox should not resize the text fontSize?

» javascript » svg viewbox should not resize the text fontSize?

By : The Catt

Date : November 28 2020, 01:01 AM

like below fixes the issue 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

code :

Share :

How do I keep a constant FontSize in WPF Viewbox?

By : beerinator

Date : March 29 2020, 07:55 AM

I hope this helps . ViewBox won't allow you to keep a constant font size, that's just not how it works. You need to put the text outside the view box for that to happen:

code :

<Grid>
    <Viewbox Stretch="Uniform">
        <Canvas Width="100" Height="100">
            <Ellipse Width="100" Height="100" Stroke="Black"/>
        </Canvas>
    </Viewbox>
    <TextBlock TextAlignment="Center" FontSize="12">Top Center</TextBlock>
</Grid>

class ViewBoxConstantFontSizeConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (!(value is double)) return null;
        double d = (double)value;
        return 100 / d * 12;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotSupportedException();
    }
}

<Window.Resources>
    ...
    <local:ViewBoxConstantFontSizeConverter x:Key="conv"/>
</Window.Resources>
...
<Viewbox Name="vb" Stretch="Uniform">
    <Canvas Width="100" Height="100">
        <Ellipse Width="100" Height="100" Stroke="Black"/>
        <TextBlock Width="100" TextAlignment="Center"
                   FontSize="{Binding ElementName=vb, 
                                      Path=ActualWidth, 
                                      Converter={StaticResource conv}}">
            Top Center
        </TextBlock>
    </Canvas>
</Viewbox>

How to set FontSize of a Textblock, which is in a Viewbox

By : user1688118

Date : March 29 2020, 07:55 AM

this one helps. Keep in mind that the FontSize sets the actual size of the text but the Viewbox then scales it after the text is laid out and rendered. You will see the same effect if you place an element with a fixed Width and Height in a Viewbox. The Viewbox doesn't change the Width, Height, or FontSize properties themselves but the final rendering appears different.
What you're actually looking for is an initial layout for the Viewbox itself that will make its initial size equal to that of the TextBlock, which will effectively set the scaling of the Viewbox to 1:1. You can achieve this in a number of ways depending on your application (directly in code, Bindings with ValueConverters, etc) but the basic method would be to measure the initial size of a parent element and set appropriate Margins to scale down the Viewbox within the layout area assigned to it. This would then allow the Viewbox to change size along with its parent as it maintains the Margins that you set. Also look at the StretchDirection, MinHeight, and MinWidth on the Viewbox.

how to calculate translations that place svg text in the viewBox, given viewBox dimensions and the text styles?

By : Jack Macky

Date : March 29 2020, 07:55 AM

I hope this helps you . Your question is confusing because we would expect that you would know better (than random strangers on the internet) what the answer is..

code :

// Find the text element
var mytext = document.getElementById("mytext");

// Get it's bounding box
var bbox = mytext.getBBox();

// Reposition text using the values from its bounding box
mytext.setAttribute("x", -bbox.x);
mytext.setAttribute("y", -bbox.y);
// Top left of text should now be at top-left of SVG (0,0)

// Now update the SVG viewBox so that it is fitted to the text
document.getElementById("mysvg").setAttribute("viewBox", "0 0 "+bbox.width+" "+bbox.height);

// Note that the bbox of the text is not tightly fitted to the text.  It includes the em boxes

text {
    fill: #000;
    fill-rule: evenodd;
    font-weight: 700;
    font-family: Helvetica-Bold, Helvetica;
    font-size: 36px
}
/* just for demo purposes */
html {
    padding: 20px;
    background: #ccc
}
svg {
    outline: 1px solid red;
    background: #fff;
    overflow: hidden /* in case you want to play around with the translation */
}

<svg id="mysvg" viewBox="0 0 258 34" xmlns="http://www.w3.org/2000/svg">
    <text id="mytext" x="0" y="0">my sample text</text>
</svg>

// Find the text element
var mytext = document.getElementById("mytext");

// Get it's bounding box
var bbox = mytext.getBBox();

// Now update the SVG viewBox so that it is fitted to the text
document.getElementById("mysvg").setAttribute("viewBox", [bbox.x, bbox.y, bbox.width, bbox.height].join(' '));

text {
    fill: #000;
    fill-rule: evenodd;
    font-weight: 700;
    font-family: Helvetica-Bold, Helvetica;
    font-size: 36px
}
/* just for demo purposes */
html {
    padding: 20px;
    background: #ccc
}
svg {
    outline: 1px solid red;
    background: #fff;
    overflow: hidden /* in case you want to play around with the translation */
}

<svg id="mysvg" viewBox="0 0 258 34" xmlns="http://www.w3.org/2000/svg">
    <text id="mytext" x="0" y="0">my sample text</text>
</svg>

WPF Calculated FontSize Inside ViewBox

By : Clément.D

Date : March 29 2020, 07:55 AM

Does that help Okay I found a work around the problem. If anyone has another solution it will be welcomed.
I wrapped the textblock inside a border and removed binding of the width of the textblock and set it manually to 1200.

code :

<Grid>
<Viewbox >
    <Border>
    <TextBlock Text="{Binding}"
               Width="{1200}"
               FontSize="{Binding}"
               TextWrapping="Wrap">

    </TextBlock>
   </Border>
</Viewbox>

KonvaJS: How to change the text class properties (fontSize, height & width) on resize in?

By : user80846

Date : March 29 2020, 07:55 AM

I hope this helps you . Probably you don't need to change scale while transforming the text. You can reset it on every transform event:

code :

tr.on('transform', function() {
     textNode.setAttrs({
         width: textNode.width() * textNode.scaleX(),
         height: textNode.height() * textNode.scaleY(),
         scaleX: 1,
         scaleY: 1,
     });
})

  tr = new Konva.Transformer({
    boundBoxFunc: function (oldBoundBox, newBoundBox) {
      if (newBoundBox.width > 200 || newBoundBox.width < textNode.fontSize()) {
        return oldBoundBox;
      } else if (newBoundBox.height < textNode.fontSize()) {
        return oldBoundBox;
      }
      return newBoundBox
    }
});