In our application we generate lots of various PDFs containing SVGs, and all of them render without any issues. The only exception is this linear gradient. Is there anything wrong about this SVG?
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="476" height="227">
<defs>
<linearGradient id="gradient">
<stop offset="0%" stop-color="#008000">
</stop>
<stop offset="50%" stop-color="#ff0000">
</stop>
<stop offset="100%" stop-color="#0000ff">
</stop>
</linearGradient>
</defs>
<rect x="17.393672215737514" y="205.945" width="122.87932223519165" height="10.055" stroke="none" stroke-width="0" fill="url(#gradient)"></rect>
</svg>
Update
As confirmed by K J the SVG is fully valid. So that must be some phantomJS rendering problem. Although I doubt that during all those years that PhantomJS is being actively used no one else faced same problem (generating PDFs containing SVGs with linear gradients seems a pretty common use case to me). PhantomJS-2.1.1 uses QtWebKit 538.1, but I wasn't able to find anyone reporting any related issues neither for phantomjs nor for qtwebkit.
Also I had a suspicion that it might be somehow related to <base> tag. I've met multiple times information about <base> tag influencing the url referencing <linearGradient> ID. But after doing some testing I came to conclusion that this is not the case, because when url is bad, my gradient element is completely blank.
I'm including this image to show my webpage against PDF output:
Nothing wrong with that SVG gradient when converted in any suitable fashion
Thus the problem must lie in the application tolerance of that input.
There are no reported open issues related to gradient, https://github.com/ariya/phantomjs/search?q=gradient&type=issues, so perhaps you need to open a fresh one with your coding method.
Related
i'm trying to display the picture of a shop in a single-shop page after clicking on said shop on the shop-list page.
once i clicked it takes the datas (from phpmyadmin) of that shop only and display the details. the name, adresse, phone number, etc all work but the picture.
i created a colomn image where i stock the url that leads to the picture located in my assets folder of the react folder.
but i tried just with url to see if the Image balise would work... AND IT WORKED :
<View><Image style={{resizeMode : 'cover'}} source= {require('../../../assets/picture1.jepg')} /></View>
so i then tried with an object called pharmaimages (it's basically just the url itself that i stocked in my database with the '' included) but it says invalid. i also tried with the propriety uri but it's even less clear.
<View><Image style={{resizeMode : 'cover'}} source= {require(pharmaimages)} /></View>
in my mind it makes perfect sense but it just doesn't work
Try storing it as require('../../../assets/image.jpeg') in the database. Fetch the data and then once you map it or whatever you do in your app, show it using the following code:
<View>
<Image style={{resizeMode : 'cover'}} source={image} />
</View>
This is one of the common issues, that most of developers got into.
The other answers may also right, But to be more precise I am adding my comments on this Question.
Actually, the require statement will never evaluate value we are passing as parameter, It will directly look for the path we are providing into it, also It is working in same way like we are importing other libraries or Components.
So if we provide dynamic value at run time with require we may fail to see expected behaviour.
Here, I am also attaching some important links which might help you to understand clearly.
Links:
React Native Official Image Doc
Same issue related thread on Stackoverflow
WORKAROUND
To go with workaround for this kind of situation you can directly store your file paths with require function in your data storage.
for ex.
Instead of storing path like '../../../abc/def.png'
Store value as require('../../../abc/def.png')
I have noticed that lighthouse is saying the I am displays images with inappropriate size for data:image/gif;base64, this iamge is generated by Materialize slider and its giving a displayed size of 381x655 an actual size 1x1 and an expected size 1143 x 1965, I can see that lighouse explains how to resolve this issue with the original image but I can not find out how to resovle this issue for a data:image/gif;base64 generated image by Materialize I mean is it a setting in jquery or css or is there some other method ?
looking at your question I guess the solution is
<img srcset="image_1143x1965.jpg 2x, image_381x655.jpg 1x" src="image_default.jpg" />
an explanation of this can be found at https://html.com/attributes/img-srcset/
I'm working with the library react-native-svg: https://github.com/react-native-community/react-native-svg to clip an image with a custom shape.
This is my code:
<Svg
height="100"
width="100">
<Defs>
<ClipPath id="clip">
<Circle cx="50%" cy="50%" r="40%"/>
</ClipPath>
</Defs>
<Image
width="100%"
height="100%"
href={{uri : 'http://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg'}}
clipPath="url(#clip)"/>
</Svg>
Here's the sample that I referred to: https://github.com/react-native-community/react-native-svg#image for the Image part (Note: Under SVG tag, the native-react-svg custom defined Image tag is used) but it only supports local images.
I tried to dig deeper and found that it uses a resolveAssetSource function that probably only helps it load local images. I couldn't fix it though.
Anyone got a clue on what can be done to make this work?
I recently published react-native-remote-svg package that lets you load local and remote svg images. You can directly point to actual .svg files and don't need to recreate svg in a jsx file. Please give it a try and let me know if you face any issues.
I noticed something very annoying with Xcode: I have some storyboards for which certain views size & position are systematically updated when I open them. This is annoying especially when working with a team.
Here how I produce this behavior:
I pull the app from a git repository
Open an affected storyboard doing no modification at all
git diff already tells me differences like
$ git diff
...
- <rect key="frame" x="576.99999828648401" y="11" width="170" height="20"/>
+ <rect key="frame" x="577" y="11" width="170" height="20"/>
...
- <rect key="frame" x="518.99999921768904" y="7" width="228" height="30"/>
+ <rect key="frame" x="519" y="7" width="227.99999841338541" height="30"/>
Is this happening to anybody else ?
The question is:
Why is my storyboard getting modified when I'm only opening it, and how to prevent it ?
Notice:
I realized this seems to happen only on <rect /> contained into labels & textFields
Xcode saves the storyboard layout information in an XML file (.storyboard). So any changes on the storyboard will be reflecected in that XML. Especially if you work with teammates this information might change regularly. You can try it out by moving around some items (don't change anything else) and after that start a diff with your git repository. You should see again a change in the XML. You could ignore the storyboard file in your git checkout. But this wouldn't make much sense as your teammates may have added new items to the storyboard.
Maybe this helps as well: [Xcode changes unmodified storyboard and XIB files
If I understand the first answer correct other changes might also trigger a change on the storyboard XML file.
regards
Thomas
There is a bug with storyboards that nobody's looking into it seems.
Try to split the storyboards as much as possible to reduce the chances of merge conflict and ease its eventual resolution. It can also escalate if you are using Xcode on an external display with a different resolution.
This issue can only be reduced but never solved.
I have a jar I include with my application with some fonts. If I paste around
<font fontName="NimbusSansGlobal Light" size="12" pdfFontName="NimbusSansGlobal Light" pdfEncoding="Identity-H" isPdfEmbedded="true"/>
into all my text elements, PDF output works fine. If I switch them all to use a style which defines the font as such:
<style name="SansFontStyle" isDefault="true" pdfFontName="NimbusSansGlobal Light" pdfEncoding="Identity-H" isPdfEmbedded="true"/>, then the font can't be found by the JRLoader when I try to generate reports. Interesting enough, if I use JRLoader within my application directly, the font is found fine.
Why would styles break PDF export?
Using Font Extensions should solve this problem.
Once you use font extensions, then you can set the font in the text element or in the style. You will not specify pdfFontName, pdfEncoding, or isPdfEmbedded in the report. That gets specified in the font extension.
Note: In a strict interpretation, this doesn't actually answer the question. I have no idea why styles work differently from directly setting the fonts. It seems like a bug, but maybe it's unexpected yet intentional for some reason we aren't thinking of. Therefore, I started to enter this as a comment rather than an answer. But it got too long.
Regardless, this should allow you to use styles as you want to. So I expect that it will solve the heart of the problem.
Font extensions are documented in the JasperReports (and iReport) samples and documentation, so it should be pretty easy to use them once you know that you ought to.