Using SciChart v5.1.0.11299, I am trying to display VerticalLineAnnotations with a TimeSpanAxis as the X axis. I can display the vertical lines using a NumericAxis, but not with the TimeSpanAxis.
<s:SciChartSurface ChartTitle="Values vs Time">
<s:SciChartSurface.XAxis>
<s:TimeSpanAxis AxisTitle="Time">
<s:TimeSpanAxis.VisibleRange>
<s:TimeSpanRange Min="00" Max="00:10:00"/>
</s:TimeSpanAxis.VisibleRange>
</s:TimeSpanAxis>
</s:SciChartSurface.XAxis>
<s:SciChartSurface.YAxis>
<s:NumericAxis AxisTitle="Values"/>
</s:SciChartSurface.YAxis>
<s:SciChartSurface.Annotations>
<s:VerticalLineAnnotation Stroke="Orange" StrokeThickness="1" X1="00:00:10"/>
<s:VerticalLineAnnotation Stroke="Orange" StrokeThickness="1" X1="00:00:20"/>
<s:VerticalLineAnnotation Stroke="Orange" StrokeThickness="1" X1="00:01:00"/>
<s:VerticalLineAnnotation Stroke="Orange" StrokeThickness="1" X1="00:02:00"/>
<s:VerticalLineAnnotation Stroke="Orange" StrokeThickness="1" X1="00:05:00"/>
</s:SciChartSurface.Annotations>
</s:SciChartSurface>
However, the corresponding version as a NumericAxis does render the VerticalLineAnnotations:
<s:SciChartSurface ChartTitle="Values vs Not Time">
<s:SciChartSurface.XAxis>
<s:NumericAxis AxisTitle="Not Time">
<s:NumericAxis.VisibleRange>
<s:DoubleRange Min="00" Max="1000"/>
</s:NumericAxis.VisibleRange>
</s:NumericAxis>
</s:SciChartSurface.XAxis>
<s:SciChartSurface.YAxis>
<s:NumericAxis AxisTitle="Values"/>
</s:SciChartSurface.YAxis>
<s:SciChartSurface.Annotations>
<s:VerticalLineAnnotation Stroke="Orange" StrokeThickness="1" X1="0010"/>
<s:VerticalLineAnnotation Stroke="Orange" StrokeThickness="1" X1="0020"/>
<s:VerticalLineAnnotation Stroke="Orange" StrokeThickness="1" X1="0100"/>
<s:VerticalLineAnnotation Stroke="Orange" StrokeThickness="1" X1="0200"/>
<s:VerticalLineAnnotation Stroke="Orange" StrokeThickness="1" X1="0500"/>
</s:SciChartSurface.Annotations>
</s:SciChartSurface>
This must be possible, but I cannot find an example of the required differences with regards to NumericAxis?
Thanks in advance.
I think the issue here is you cannot set a TimeSpan easily in Xaml.
The property the of VerticalLineAnnotation.X1 is IComparable, so the Xaml compiler picks it up as a string.
Try setting the X1 to a TimeSpan in code, an attached behaviour or binding to a ViewModel
Related
Trying to convert this code:
.wavy-text{filter:url('#wavy')}
<h1 class="wavy-text">Wavy Text Generator</h1>
<svg width="100%" height="100%" style="display:none;">
<defs>
<filter id="wavy" filterUnits="userSpaceOnUse" x="0" y="0">
<feTurbulence id="wave-animation" numOctaves="1" seed="1" baseFrequency="0 0"></feTurbulence>
<feDisplacementMap scale="10" in="SourceGraphic"></feDisplacementMap>
</filter>
<animate xlink:href="#wave-animation" attributeName="baseFrequency" dur="3s" keyTimes="0;0.5;1" values="0.0 0.04;0.0 0.07;0.0 0.04" repeatCount="indefinite">
</animate>
</defs>
</svg>
into component in React with Next.js.
So I would like to use it as a component where I can put my own text and re-use it, but I got no idea how to convert that kind of code into React Next friendly mode.
Where does that code even take itss css class .wavy-text styles?
Original source for the code:
http://www.coding-dude.com/wp/wavy-text-generator/
So, if you check the fiddle, (https://jsfiddle.net/xXnikosXx/6jx2rpsf/3/)
I have an SVG image, with a couple of objects, and a mask. It's masking the text (colorful lines) which are hidden below it, and the plan was to animate their top position to make the text from below appear and the text from the top to disappear, to make a text scrolling effect. The text without the mask is shown in the image below, in case it helps.
here
I thought the text would appear when the animation occurs, but it doesnt (if you remove the mask, the text is shown and animated properly but they layers are wrong so the text appears above everything else)
I cant figure out a way to make the text animate properly using the mask, is there something i can use instead of the mask to get the same result, but without the text issue?
relevant code:
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="354" y="174" width="733" height="344">
<rect id="laptop-screen-front" x="354" y="174" width="733" height="344" fill="white" />
</mask>
<g mask="url(#mask0)">
<!-- some of the lines that represent text: -->
<g id="text-lines">
<line id="Line 3" x1="408" y1="194.5" x2="433" y2="194.5" stroke="#E06C60" stroke-width="5" />
<line id="Line 23" x1="438" y1="194.5" x2="463" y2="194.5" stroke="#D18C4C" stroke-width="5" />
<line id="Line 35" x1="469" y1="194.5" x2="542" y2="194.5" stroke="#7BC379" stroke-width="5" />
<line id="Line 36" x1="469" y1="209.5" x2="525" y2="209.5" stroke="#7BC379" stroke-width="5" />
</g>
Your code doesn't animate the mask. It attempts to animate the position of the text-lines g element. But SVG is not HTML. It is its own thing and doesn't support many common CSS properties: e.g. most relevant for you - there is no "top" property in SVG. The easiest way to do what you want is to get rid of all the CSS animations, and add a transform and a SMIL animation directly into the following part of the SVG.
<g mask="url(#mask0)">
<g id="text-lines" transform="translate(0 0)">
<animateTransform attributeName="transform" type="translate" values="0 0; 0 -150; 0 0" dur="11s" repeatCount="indefinite"/>
<line id="Line 3" x1="408" .... etc.
BTW - one of the reasons to use transforms for animation is that browsers can often optimize things by doing the animation on the GPU - so it's better than viewBox or top animations.
2 methods:
with SMIL
svg#parent {
background-color: rgba(100, 148, 237, 0.3);
}
<svg id="parent" width="200" height="100" viewBox="0 0 200 100">
<rect x="10" y="10" width="180" height="20" fill="white" />
<svg x="10" y="10" width="180" height="20" viewBox="0 0 180 20" >
<text x="20" y="15" > hello </text>
<text x="20" y="35" > world </text>
<animate attributeName="viewBox"
values="0 0 180 20; 0 20 180 20; 0 0 180 20"
begin="1s" dur="2s" repeatCount="indefinite" />
</svg>
</svg>
with javascript - requestAnimationFrame
(function()
{
const
svgInside = document.querySelector('#insideSVG')
, moving = .7 // change the value to slow down or speed up
;
let
stepVal = moving
, stepPos = 0
;
requestAnimationFrame(step)
;
function step()
{
stepPos += stepVal
if (stepPos<=0) stepVal = moving
if (stepPos>=20) stepVal = -moving
svgInside.setAttribute('viewBox',`0 ${stepPos} 180 20`)
requestAnimationFrame(step)
}
}
)()
svg#parent {
background-color: rgba(100, 148, 237, 0.3);
}
<svg id="parent" width="200" height="100" viewBox="0 0 200 100">
<rect x="10" y="10" width="180" height="20" fill="white" />
<svg x="10" y="10" width="180" height="20" viewBox="0 0 180 20"
id="insideSVG" >
<text x="20" y="15" > hello </text>
<text x="20" y="35" > world </text>
</svg>
</svg>
For your SVG the values should be around:
<svg x="354" y="174" width="733" height="344" viewBox="354 174 733 344" >
<line x1="419" y1="187.5" ..... />
/.../
<animate attributeName="viewBox"
values="354 174 733 344; 354 520 733 344; 354 174 733 344"
begin="1s" dur="8s" repeatCount="indefinite" />
</svg>
how does <animate> work ?
– Paul LeBeau
the mdn documentation is quite complete: :
SVG animation with SMIL
<animate>
do not hesitate to consult the links to additional information pages
but if you want a general vision of the animation possibilities of your SVGs, the Wikipedia page is ideal
There is even a part showing the use of the requestAnimationFrame(), which I am using here.
PS:The Whitesmith style has been around since 1978, and no, I don't use it for aesthetic reasons but because it checks that the right pairs of braces frame the right pieces of code. For the same reasons, I put the commas in front of data lines (they are invisible [and often forgotten] at the end of the line), as well as the column alignment (both in a similar way used in Haskell)
No, the K&R is not a foolproof style, nor is it more legitimate than any other.
The code from an online SVG basic course:
<body class="site">
<figure class="theimage">
<svg id="custom-shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
<defs>
<radialGradient id="sky" cx=".7" cy=".4" r=".5">
<stop stop-color="#00dffe" offset="0%" />
<stop stop-color="#38a3d1" offset="100%" />
</radialGradient>
<radialGradient id="sun">
<stop stop-color="yellow" offset="80%" />
<stop stop-color="hsla(60, 100%, 50%, 0)" offset="100%" />
</radialGradient>
</defs>
<rect fill="url(#sky)" x="0" y="0" width="500" height="500" />
<circle fill="url(#sun)" cx="350" cy="200" r="100" />
</svg>
</figure>
</body>
The cx and cy value range is 0 ~ 1, why not 500, 500 (set in viewBox)?
In the following code:
<body class="site">
<figure class="theimage">
<svg id="custom-shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<circle class="stroke fill" cx="40" cy="60" r="20" />
</svg>
</figure>
</body>
I guess it's because <radiaGradient> is 'nested' in the outer circle or other outer shape, so cx or cy ranges from 0 to 1 (or 100%). But I don't find some references online. Please clarify this out for me or provide me some useful links to the references? Thanks in advance.
The SVG specification may have what you are looking for:
https://www.w3.org/TR/SVG11/pservers.html#RadialGradientElementCXAttribute
"The gradient will be drawn such that the 100% gradient stop is mapped to the perimeter of this largest (i.e., outermost) circle."
Also, the spec contains this:
"When percentages are used with attributes that define the gradient vector, the pattern tile, the filter region or the masking region, a percentage represents the same value as the corresponding decimal value (e.g., 50% means the same as 0.5)."
(https://www.w3.org/TR/SVG11/coords.html#ObjectBoundingBoxUnits)
The default behavior of gradients is to express sizes in fractions of the bounding box of the element the gradient is applied to.
To change this behavior, you can use the attribute gradientUnits:
objectBoundingBox uses fractions of the bounding box (default).
userSpaceOnUse uses the same coordinate system as the element the gradient is applied to.
I use VerticallStackedAxes of SciChart component and add 7 AxisMarkerAnnotation to each NumericAxis but AxisMarkerAnnotations not draggable except first of them.
this is the part of my UserControl code:
<s:SciChartSurface.YAxes>
<s:NumericAxis x:Name="Ch0" Style="{StaticResource YAxisStyle}" Id="Ch0" AxisTitle="Ch0" Grid.Row="0"/>
<s:NumericAxis x:Name="Ch1" Style="{StaticResource YAxisStyle}" Id="Ch1" AxisTitle="Ch1" Grid.Row="2" />
<s:NumericAxis x:Name="Ch2" Style="{StaticResource YAxisStyle}" Id="Ch2" AxisTitle="Ch2" Grid.Row="4" />
<s:NumericAxis x:Name="Ch3" Style="{StaticResource YAxisStyle}" Id="Ch3" AxisTitle="Ch3" Grid.Row="6" />
<s:NumericAxis x:Name="Ch4" Style="{StaticResource YAxisStyle}" Id="Ch4" AxisTitle="Ch4" Grid.Row="8" />
<s:NumericAxis x:Name="Ch5" Style="{StaticResource YAxisStyle}" Id="Ch5" AxisTitle="Ch5" Grid.Row="10" />
<s:NumericAxis x:Name="Ch6" Style="{StaticResource YAxisStyle}" Id="Ch6" AxisTitle="Ch6" Grid.Row="12" />
<s:NumericAxis x:Name="Ch7" Style="{StaticResource YAxisStyle}" Id="Ch7" AxisTitle="Ch7" Grid.Row="14" />
</s:SciChartSurface.YAxes>
<s:SciChartSurface.ChartModifier>
<s:ModifierGroup>
<s:RubberBandXyZoomModifier IsXAxisOnly="True"/>
<s:ZoomExtentsModifier/>
<s:CursorModifier ShowAxisLabels="False" ShowTooltip="False"/>
</s:ModifierGroup>
</s:SciChartSurface.ChartModifier>
<s:SciChartSurface.Annotations>
<!-- Draws Bands behind each axis -->
<s:BoxAnnotation YAxisId="Ch0" CoordinateMode="RelativeX" X1="0" X2="1" Y1="{Binding VisibleRange.Min, ElementName=Ch0}" Y2="{Binding VisibleRange.Max, ElementName=Ch0}" Background="#11000000" AnnotationCanvas="BelowChart"/>
<s:BoxAnnotation YAxisId="Ch1" CoordinateMode="RelativeX" X1="0" X2="1" Y1="{Binding VisibleRange.Min, ElementName=Ch1}" Y2="{Binding VisibleRange.Max, ElementName=Ch1}" Background="#44B0C4DE" AnnotationCanvas="BelowChart"/>
<s:BoxAnnotation YAxisId="Ch2" CoordinateMode="RelativeX" X1="0" X2="1" Y1="{Binding VisibleRange.Min, ElementName=Ch2}" Y2="{Binding VisibleRange.Max, ElementName=Ch2}" Background="#11000000" AnnotationCanvas="BelowChart"/>
<s:BoxAnnotation YAxisId="Ch3" CoordinateMode="RelativeX" X1="0" X2="1" Y1="{Binding VisibleRange.Min, ElementName=Ch3}" Y2="{Binding VisibleRange.Max, ElementName=Ch3}" Background="#44B0C4DE" AnnotationCanvas="BelowChart"/>
<s:BoxAnnotation YAxisId="Ch4" CoordinateMode="RelativeX" X1="0" X2="1" Y1="{Binding VisibleRange.Min, ElementName=Ch4}" Y2="{Binding VisibleRange.Max, ElementName=Ch4}" Background="#11000000" AnnotationCanvas="BelowChart"/>
<s:BoxAnnotation YAxisId="Ch5" CoordinateMode="RelativeX" X1="0" X2="1" Y1="{Binding VisibleRange.Min, ElementName=Ch5}" Y2="{Binding VisibleRange.Max, ElementName=Ch5}" Background="#44B0C4DE" AnnotationCanvas="BelowChart"/>
<s:BoxAnnotation YAxisId="Ch6" CoordinateMode="RelativeX" X1="0" X2="1" Y1="{Binding VisibleRange.Min, ElementName=Ch6}" Y2="{Binding VisibleRange.Max, ElementName=Ch6}" Background="#11000000" AnnotationCanvas="BelowChart"/>
<s:BoxAnnotation YAxisId="Ch7" CoordinateMode="RelativeX" X1="0" X2="1" Y1="{Binding VisibleRange.Min, ElementName=Ch7}" Y2="{Binding VisibleRange.Max, ElementName=Ch7}" Background="#44B0C4DE" AnnotationCanvas="BelowChart"/>
<s:AxisMarkerAnnotation X1="0.0"
Y1="0.0"
YAxisId="Ch0"
IsEditable="True"
LabelTemplate="{StaticResource AxisMarkerTemplate}"
PointerTemplate="{StaticResource DefaultAxisPointerTemplate}"/>
<s:AxisMarkerAnnotation X1="0.0"
Y1="0.0"
YAxisId="Ch1"
IsEditable="True"
LabelTemplate="{StaticResource AxisMarkerTemplate}"
PointerTemplate="{StaticResource DefaultAxisPointerTemplate}"/>
</s:SciChartSurface.Annotations>
You can find source code in this url:
https://github.com/ABTSoftware/SciChart.WPF.Examples/tree/master/v4.x/Examples/SciChart.Examples/Examples/ModifyAxisBehaviour
thanks
there is a bug in GetDataValue from axis class, that doesn't calculate yaxis offset.
In one of my projects, I fixed the problem with this class:
class FixedAxisMarkerAnnotation : AxisMarkerAnnotation
{
protected override IComparable FromCoordinate(double coord, IAxis axis)
{
var coordinateCalculator = this.YAxis.GetCurrentCoordinateCalculator();
if (!axis.IsXAxis)
coord += coordinateCalculator.CoordinatesOffset;
//
return base.FromCoordinate(coord, axis);
}
}
I was able to reproduce this problem, and currently investigating it.
Also you can track the progress on the issue here ===>>> https://abtsoftware.myjetbrains.com/youtrack/issue/SC-4202
Nazar Pelyushkevych,
SciChart WPF team
I am trying to resize this SVG file produced using inkscape
I have tried using viewBox="0 0 h w" attribute within the <svg/> but it crops the image instead of resizing. Thanks in anticipation
Inkscape doesn't add a viewBox attribute to the files it produces. That attribute is needed for scaling to work.
The solution is to convert the width and height values to a viewBox and then alter your width and height.
So add the following to your root <svg> tag:
viewBox="0 0 205 69"
Then change your width/height. If you want double size, you could do:
width="410" height="138"
Or if you want it to fill the page or it's parent container you could do:
width="100%" height="100%"
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<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"
viewBox="0 0 205 69"
width="100%"
height="100%"
id="svg2985"
version="1.1"
inkscape:version="0.48.4 r9939"
sodipodi:docname="official.svg">
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1.88"
inkscape:cx="268.4359"
inkscape:cy="163.44054"
inkscape:current-layer="layer1"
inkscape:document-units="px"
showgrid="false"
inkscape:window-width="1301"
inkscape:window-height="744"
inkscape:window-x="65"
inkscape:window-y="24"
inkscape:window-maximized="1">
<sodipodi:guide
id="guide3594"
position="0,370.82039325"
orientation="0,800.0" />
<sodipodi:guide
id="guide3596"
position="0,229.17960675"
orientation="0,800.0" />
<sodipodi:guide
id="guide3598"
position="494.427191,0"
orientation="600.0,0" />
<sodipodi:guide
id="guide3600"
position="305.572809,0"
orientation="600.0,0" />
<sodipodi:guide
id="guide3602"
position="0,600.0"
orientation="0,800.0" />
<sodipodi:guide
id="guide3604"
position="600.0,0"
orientation="0,800.0" />
<sodipodi:guide
id="guide3606"
position="0,800.0"
orientation="600.0,0" />
<sodipodi:guide
id="guide3608"
position="800.0,0"
orientation="600.0,0" />
</sodipodi:namedview>
<defs
id="defs2987" />
<metadata
id="metadata2990">
<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></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
id="layer1"
inkscape:label="Layer 1"
inkscape:groupmode="layer"
transform="translate(0,-531)">
<path
sodipodi:type="star"
style="fill:#008080;fill-opacity:1;fill-rule:evenodd;stroke:#008080;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0.03921569"
id="path3003"
sodipodi:sides="3"
sodipodi:cx="208.33333"
sodipodi:cy="448.33334"
sodipodi:r1="329.16138"
sodipodi:r2="164.5807"
sodipodi:arg1="0.57255439"
sodipodi:arg2="1.6197519"
inkscape:flatsided="true"
inkscape:rounded="0.15947024"
inkscape:randomized="0"
d="M 484.99998,626.66667 C 435.74244,703.08492 -42.889814,679.63445 -84.441188,598.76703 -125.99256,517.89962 133.63227,115.11717 224.44119,119.56633 c 90.80892,4.44916 309.81634,430.68209 260.55879,507.10034 z"
inkscape:transform-center-x="-8.8816078"
inkscape:transform-center-y="-0.012778438"
transform="matrix(0.00520436,0.0991022,-0.10795132,0.00477775,212.00937,543.99054)" />
<path
sodipodi:type="star"
style="fill:#241f1c;fill-opacity:0.33333333;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0.03921569"
id="path3003-6"
sodipodi:sides="3"
sodipodi:cx="208.33333"
sodipodi:cy="448.33334"
sodipodi:r1="329.16138"
sodipodi:r2="164.5807"
sodipodi:arg1="0.57255439"
sodipodi:arg2="1.6197519"
inkscape:flatsided="true"
inkscape:rounded="0.15947024"
inkscape:randomized="0"
d="M 484.99998,626.66667 C 435.74244,703.08492 -42.889814,679.63445 -84.441188,598.76703 -125.99256,517.89962 133.63227,115.11717 224.44119,119.56633 c 90.80892,4.44916 309.81634,430.68209 260.55879,507.10034 z"
inkscape:transform-center-x="-8.8816118"
inkscape:transform-center-y="-0.012779205"
transform="matrix(0.00520436,0.0991022,-0.10795132,0.00477775,213.12005,546.20636)" />
<text
xml:space="preserve"
style="font-size:16.25434494px;font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#576a6c;fill-opacity:1;stroke:none;font-family:Century Schoolbook L;-inkscape-font-specification:Century Schoolbook L Medium"
x="2.427422"
y="563.2641"
id="text3791"
sodipodi:linespacing="125%"><tspan
sodipodi:role="line"
id="tspan3793"
x="2.427422"
y="563.2641"
style="font-size:36.57227707px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;word-spacing:0px;fill:#576a6c;fill-opacity:1;font-family:Ubuntu;-inkscape-font-specification:Ubuntu">Akogun</tspan></text>
<text
xml:space="preserve"
style="font-size:16.25434494px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
x="186.45212"
y="409.6254"
id="text5280"
sodipodi:linespacing="125%"><tspan
sodipodi:role="line"
id="tspan5282"
x="186.45212"
y="409.6254" /></text>
<text
xml:space="preserve"
style="font-size:16.25434494px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#008080;fill-opacity:0.50196078;stroke:none;font-family:Sans"
x="49.39143"
y="567.16937"
id="text5284"
sodipodi:linespacing="125%"><tspan
sodipodi:role="line"
id="tspan5286"
x="49.39143"
y="567.16937" /><tspan
sodipodi:role="line"
id="tspan5288"
x="49.39143"
y="584.67633"
style="font-size:13.20665646px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;fill:#008080;fill-opacity:0.50196078;font-family:Ubuntu;-inkscape-font-specification:Ubuntu">P o l y m a t h</tspan></text>
<path
sodipodi:type="star"
style="fill:#241f1c;fill-opacity:0.33333333;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0.03921569"
id="path3003-6-5"
sodipodi:sides="3"
sodipodi:cx="208.33333"
sodipodi:cy="448.33334"
sodipodi:r1="329.16138"
sodipodi:r2="164.5807"
sodipodi:arg1="0.57255439"
sodipodi:arg2="1.6197519"
inkscape:flatsided="true"
inkscape:rounded="0.15947024"
inkscape:randomized="0"
d="M 484.99998,626.66667 C 435.74244,703.08492 -42.889814,679.63445 -84.441188,598.76703 -125.99256,517.89962 133.63227,115.11717 224.44119,119.56633 c 90.80892,4.44916 309.81634,430.68209 260.55879,507.10034 z"
inkscape:transform-center-x="-8.8816136"
inkscape:transform-center-y="-0.012761026"
transform="matrix(0.00520436,0.0991022,-0.10795132,0.00477775,214.3031,538.55495)" />
<flowRoot
xml:space="preserve"
id="flowRoot3053"
style="font-size:40px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
transform="matrix(0.40635864,0,0,0.40635864,0.801987,362.21684)"><flowRegion
id="flowRegion3055"><rect
id="rect3057"
width="598"
height="182"
x="102"
y="144" /></flowRegion><flowPara
id="flowPara3059" /></flowRoot> <flowRoot
style="font-size:40px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
id="flowRoot3296"
xml:space="preserve"
transform="matrix(0.40635864,0,0,0.40635864,0.801987,362.21684)"><flowRegion
id="flowRegion3298"><rect
y="164"
x="30"
height="218"
width="502"
id="rect3300" /></flowRegion><flowPara
id="flowPara3302" /></flowRoot> </g>
</svg>
The svg/#viewBox attribute controls the range of coordinates which are shown within the viewport ( the area of the screen the svg takes up ).
The size of the viewport is determined mostly by the svg/#width and svg/#height attributes - see https://www.w3.org/TR/SVG/coords.html
The ‘width’ attribute on the outermost svg element establishes the viewport's width [...], if there are positioning properties specified on the referencing element or on the outermost svg element that are sufficient to establish the height of the viewport, then these positioning properties establish the viewport's height; otherwise, the ‘height’ attribute on the outermost svg element establishes the viewport's height.