How can I convert an amazon presigned url to a correct href attribute value for the svg image?
For example, here I have a url:
https://s3.us-east-1.amazonaws.com/zed-content/Dialogue%20Items/a0A1r00002sLxg9EACLeft/testImg.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAJ7V4MJWO3GNAM6WA%2F20180710%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20180710T133927Z&X-Amz-Expires=604800&X-Amz-Signature=1044208e8a3fc4167fcd738637316d31a6b9a843063ec5658f8e7720c8963fb0&X-Amz-SignedHeaders=host
It url displays an image, but I do not know how to put the image situated behind the url as an svg image.
I am storing image using the .jpg extension. Now I would like to get the href for that image so that to display it using the image svg element.
In other words I want to have something like
<svg>
<image href="IDoNotKnowWhatToPutInHere.jpg"/>
</svg>
You can do it like this. Change the width and height to your liking's.
.svg-main,
.svg-image {
width: 200px;
height: 200px;
}
<svg class="svg-main">
<image class="svg-image" href="https://s3.us-east-1.amazonaws.com/zed-content/Dialogue%20Items/a0A1r00002sLxg9EACLeft/testImg.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAJ7V4MJWO3GNAM6WA%2F20180710%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20180710T133927Z&X-Amz-Expires=604800&X-Amz-Signature=1044208e8a3fc4167fcd738637316d31a6b9a843063ec5658f8e7720c8963fb0&X-Amz-SignedHeaders=host"/>
</svg>
I'm having some difficulties with centering a piechart I created in D3 in it's parents div. I've set up a JS-fiddle right here: https://jsfiddle.net/86czgLnu/
The problem is that it overflows it's parents dimensions and I want it to scale to fit and be in the center of the parent. I found documentation about preserveAspectRatio and viewBox but wasn't able to fix it with those.
All the code is in the fiddle
Thanks for having a look.
Unfortunately, you can't use percentages inside translate. The best idea would be using JS (D3, in your case) to get the size of the container and translate the group appropriately, by half its width.
Here is your SVG with absolute values for the translate:
<div class="js-graph ct-chart">
<svg width="100%" height="100%">
<g transform="translate(50,50) scale(0.2)">
<path class="slice" fill="#8c564b" d="M1.3532347130578253e-14,-221A221,221,0,1,1,-119.28791713380294,186.04137396256502L0,0Z" original-title=""></path>
<path class="slice" fill="#c49c94" d="M-119.28791713380294,186.04137396256502A221,221,0,0,1,-210.51725450349846,-67.25686252204494L0,0Z"></path>
<path class="slice" fill="#e377c2" d="M-210.51725450349846,-67.25686252204494A221,221,0,0,1,-4.059704139173476e-14,-221L0,0Z"></path>
</g>
</svg>
</div>
An alternative to simulate a translate by percentage is using an inner SVG, as described in this answer by Robert Longson. However, it won't work, because the pie chart is drawn at the origin:
<div class="js-graph ct-chart">
<svg width="100%" height="100%">
<svg x="50%" y="50%">
<g transform="scale(0.2)">
<path class="slice" fill="#8c564b" d="M1.3532347130578253e-14,-221A221,221,0,1,1,-119.28791713380294,186.04137396256502L0,0Z" original-title=""></path>
<path class="slice" fill="#c49c94" d="M-119.28791713380294,186.04137396256502A221,221,0,0,1,-210.51725450349846,-67.25686252204494L0,0Z"></path>
<path class="slice" fill="#e377c2" d="M-210.51725450349846,-67.25686252204494A221,221,0,0,1,-4.059704139173476e-14,-221L0,0Z"></path>
</g>
</svg>
</svg>
</div>
PS: scale is part of the "transform" attribute.
I have svg image with this attributes: viewBox="0 0 100 100"
This is basic code which I use for displaying svg:
Image{
width: 50
height: 50
source: "test.svg"
}
and it's not ok because image is rasterized before resizing to width and height values(50,50).
This code works perfect on all resolution:
Image{
width: 50
height: 50
sourceSize.width: width
sourceSize.height: height
source: "test.svg"
}
because image is drawn in exact dimensions which is needed!
Is it possible to get same functionality in a TextEdit where <img> tag is used?
<img src="test.svg" width="50" height="50">
This code doesn't work because sourceSize can't be set... and image is rasterized before resizing and displaying...
Maybe there is some other way to accomplish this?
The only solution is to provide the image size as part of the image url, and reimplement QTextDocument::loadResource or QTextEdit::loadResource in a derived class. Your image element would then look like:
<img src="test.svg?50x50" width="50" height="50" />
You can parse the url in your implementation of loadResource.
http://continent-news.info/page_20.html
In the left column of news, they opens in a popup window, and loaded with Ajax.
<div class="ukraine_mask1">
<svg height="116px" width="142px">
<defs>
<mask id="ukraine_mask1" maskContentUnits="userSpaceOnUse" maskUnits="userSpaceOnUse">
<image xlink:href="mask/ukraine_mask1.png" height="116px" width="142px">
</mask>
</defs>
<foreignObject class="recov_ukraine_mask1" style="mask: url(#ukraine_mask1);" height="100%" width="100%">
<div class="element_mask mask1_ukraine">
<img src="../inf_images/small/7812_8926.jpeg">
</div>
</foreignObject>
</svg>
</div>
problem in Mozilla:
Some news used map with a mask, the first time the mask works well. But if I click another news with mask, they does not want to re-use mask... =( If I press again the first news, it will work.
The second time, does not want to re-use =(
If in firebug disable / apply
mask: url ("# ukraine_mask1")
in
foreignObject class = "recov_ukraine_mask1"
it will work again ...
Maybe someone have an idea how to solve this problem?
I tried to add a simple style in СSS, but does not help = (
I'm rendering an SVG image using
<img src="data:image/svg+xml;charset=utf-8;base64," + src />
where src is the Base64 encoded SVG image. Everything in the picture displays correctly except for the text in the fields which are not displayed at all. This problem exists in Chrome, but not in Internet Explorer. Any ideas on how to get around this problem?
If I right-click on the displayed picture, download it and view it in Linux's Image Viewer, the text shows up perfectly again.
Edit: Example of SVG image:
<svg width="700" height="220" title="test2" version="1.1" xmlns="http://www.w3.org/2000/svg">
<text y="100" x="90" dy=".32em" text-anchor="end">
12
</text>
</svg>
In my case was a problem, that a have created <text> as document.createElement('text') and the svg result looked like this:
<svg xmlns="http://www.w3.org/2000/svg">
<text xmlns y="100" x="90" dy=".32em" text-anchor="end">
12
</text>
</svg>
And after encoded to base 64 using window.btoa() the text also not being rendered.
In my case the reason was in an empty xmlns attribute in text tag.
Solution: I have created element using document.createElementNS('http://www.w3.org/2000/svg', 'text'). It creates an element with the specified namespace URI and qualified name.