Does anyone know a method of changing the height and width of an svg image of a highchart. I'm getting the svg code using
var svg = chart1.getSVG();
The code itself then is :
<svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" style="font-family:'lucida grande', 'lucida sans unicode', arial, helvetica, sans-serif;font-size:12px;" xmlns="http://www.w3.org/2000/svg" width="600" height="300"><desc>Created with Highstock 4.2.5</desc><defs><clipPath id="highcharts-11"><rect x="0" y="0" width="517" height="300"></rect></clipPath></defs><rect x="0" y="0" width="600" height="300" fill="#FFFFFF" class=" highcharts- ... etc
I've tried changing the height and width properties in this piece of code but it doesn't seem to work properly. I've also tried using the Viewbox method as well but that seems to make it too small. realistically I just need to change the height as the width seems to be okay, but if I could I would like to increase the width a small bit.I'm trying to print the svg in a pdf to show the charts but their not showing up true to their size (which is expected)
Any Ideas?
Thanks!
Related
I am trying to understand why in the following svg the element appears in the center
<svg xmlns="http://www.w3.org/2000/svg"
width="400" height="100"
viewBox="0 0 100 100"
style="outline: 1px solid green"
>
<rect x="0" y="0" width="75" height="100" fill="#2222FF" stroke="green"/>
</svg>
My understanding is that viewBox would take the box defined by the coordinates 0,0 - 100,100 on the svg and map it to the 400x100 image. So that should give me a top-to-bottom rectangle that reaches 3/4 of the way across. At the very least I would expect the rectangle to be all the way on the left.
I cannot for the life of me understand why the rectangle here appears in the center. What is going on?
Because the default preserveAspectRatio is xMidYMid.
I have this svg:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
viewBox="0 0 ' + size + ' ' + size +'" width="'+ boxW +'" height="'+ boxH +'">
<text>Sample Text</text>
</svg>
size: A parameter that is needed to the viewBox in order to create the wrapper.
width & height: the width and height of the container of the text.
I have a function that generate this svg. The problem is that the text is not fitting into the box; the result is like this:
(Is blue due to the Chrome inspector, you can see up in the top-left corner the text being small instead of full size.
The SVG resulted is this:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
viewBox="0 0 580 532">
<text x="0" y="15" style="font-family:Arial;fill:%230000ff;fill-opacity:1;font-weight:normal;font-style:normal;"
>test</text>
</svg>
The whole img is this:
<img src="data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 580 532"><text x="0" y="15" style="font-family:Arial;fill:%230000ff;fill-opacity:1;font-weight:normal;font-style:normal;">test</text></svg>" class="leaflet-marker-icon leaflet-zoom-animated leaflet-interactive" alt="" tabindex="0" style="margin-left: -298px; margin-top: -291px; width: 309px; height: 295px; transform: translate3d(683px, 317px, 0px); z-index: 317; outline: none;">
So my quesiton is: How to fit the text into the main wrapper?
You either have to:
fit the viewBox to the text, or
fit the text to the viewBox.
You are not doing either. You are not even setting a font-size.
Option 1 is not really available to you. You can measure the text if you have access to the SVG DOM, but you can't do that if you aren't in a rendering environment, like a browser.
Perhaps you could use a font loading library to get metadata about the glyphs in the font. Then calculate the size of a piece of text that way. You don't mention which language you are using to produce these SVGs, so I can't advise further on that.
So you are left with option 2. The only option that SVG has to let you fit text to a particular size, is the textLength and lengthAdjust attributes on the <text> element.
textLength
Sets a length to which you want the text to be fitted
lengthAdjust
Sets the method to be used to adjust the length. You can either stretch just the spacing between the letters, or you can stretch the letter glyphs
See the <text> section in the spec for more information
There are no options for adjusting the text height.
svg {
width: 400px;
background-color: linen;
}
<svg viewBox="0 0 200 40">
<line x1="10" y1="30" x2="190" y2="30" stroke="black" opacity="0.2"/>
<text x="10" y="30"
textLength="180"
lengthAdjust="spacing">Sample Text</text>
</svg>
<br/>
<svg viewBox="0 0 200 40">
<line x1="10" y1="30" x2="190" y2="30" stroke="black" opacity="0.2"/>
<text x="10" y="30"
textLength="180"
lengthAdjust="spacingAndGlyphs">Sample Text</text>
</svg>
If you want the font size to be a better match, then you are going to have to work out a method of calculating an approximate font size. Eg.
var numChars = text.length()
var fontSize = (desiredTextWidth / numChars) * someScalingFactor
The scaling factor will depend on your font.
This is my solution: I'm putting the text inside a <symbol>. I get the size of the text with getBBox() and use it to set the viewBox for the <symbol>. Please note that the <use> element has a width of 100%.
let bb = text.getBBox();
test.setAttributeNS(null, "viewBox", `${bb.x} ${bb.y} ${bb.width} ${bb.height}`);
*{font-size:16px;}
svg{border:1px solid;width:90vh}
body{font-family:Arial;fill:#0000ff;fill-opacity:1;font-weight:normal;font-style:normal;}
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 580 532">
<symbol id="test">
<text id="text" dominant-baseline="central" text-anchor="middle" >test</text>
</symbol>
<use id="_use" xlink:href="#test" width="100%" />
</svg>
I am creating an SVG element, and would like to change its background color. As per this question, and as per W3C recommendations, background-color is not a standard style for SVG, but fill must be used instead. However, fill does not work and the most common solution was to create a rect element inside the svg element and make that rect element have a width and height similar to that of the svg.
So, the following is the outcome of the suggested solution:
<svg width="300" height="200">
<rect width="300" height="200" style="fill: rgb(0, 255, 0);></rect>
</svg>
I then changed that to:
<svg width="300" height="200">
<rect width="100%" height="100%" style="fill: rgb(0, 255, 0);"></rect>
</svg>
(note that I have width and height set to 100% in my second attempt).
Now my question: even though this works, is using percentages in width and height a W3C standard? Or is it a hack?
Thanks.
is using percentages in width and height a W3C standard?
Yes. According to https://www.w3.org/TR/SVG/coords.html:
The supported length unit identifiers are: em, ex, px, pt, pc, cm, mm, in, and percentages.
This SVG looks blurry in all browsers, at all zoom levels.
<svg xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
width="240" height="240" version="1.1">
<rect width="200" height="200" x="20" y="20"
ry="20" style="fill:#fff;stroke:#000" />
</svg>
In Chrome, Safari and Firefox it looks like this:
If you zoom in you can see that the stroke has a two pixel width, even though the default stroke width is 1px. Manually setting it to 1px does not affect the output.
This has to do with the pixel rastering. The line-width is 1px and it is centered at (20,20). It is drawn between 19.5 and 20.5 px, so that the browser has to color both pixels to "use enough ink".
Solution: Use 19.5 as coordinates to be in the pixel raster.
<svg xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
width="240" height="240" version="1.1">
<rect width="200" height="200" x="19.5" y="19.5"
ry="20" style="fill:#fff;stroke:#000" />
</svg>
Edit:
In the following image, the blue dot has size of 1px and is located (centered) at (1,1). All four pixels will be colored to get a pixel image that is as close as possible to the not displayable dot.
I am just getting started with SVG and am now trying out rotating objects.
I have the initial canvas and have created my own drag and drop function so on mousedown the drag is initialized and mouseup it stops. The problem i'm having is when I rotate an object, it seems to change the x and y. This is visible when i'm trying to drag an object. Does anyone know how to get around this so the x and y get "normalized" in relation to the rotate angle?
Here's my code.
<svg version="1.1" width="900" height="400"><text x="10" y="10" id="text_0" width="200" height="40" transform="rotate(45, 0, 0)">SVG test</text></svg>
Thanks
rotate parameters give you the angle and the center of the rotation (see MDN for example). And what about the width and height attributes in your text anyways? This is not part of the standard as of here. If you want to change the size of your text, do so using font-size in the style.
If you want to rotate the text around its (the text element's) center you may use for example the following:
<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" width="900" height="400" xmlns="http://www.w3.org/2000/svg">
<text x="10" y="10" id="text_0" transform="rotate(45, 10, 10)" style="dominant-baseline: middle; text-anchor: middle;">
SVG test
</text>
</svg>