I want to create a home screen design where icons are vertically tilted (not a property stacked design). Also these navigational icons are connected by thick black connecting lines. I tried to use absolute positions but on different resolutions either icons are misaligned or those images are not reaching full screen edges. Can you please suggest how can we create such designs perfectly fit in all kind of resolutions?
You are gonna have a really fun time to do this in RN but it is possible. You can use the transform property in the style to apply a rotation.
Check here: https://facebook.github.io/react-native/docs/transforms#transform
I tried getting the screen size and positioning the each element using position absolute but it was still getting distorted in different mobiles.
If anyone still looking for an answer, I solved this using svg. (not sure if it is the best solution).
If you are not using expo then you need to use react-native-svg. It is already included in expo. Then you can create complex design as svg using sketch/adobe illustrator. Now edit svg image using any text editor and copy the code. "react-native-svg" supports most of the standard svg tags but there is slight difference (you can get that from documentation).
<Svg height={height} width={width} viewBox="150 90 650 806">
<G id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<G id="Group" transform="translate(1.000000, 0.000000)">
<Rect id="Rectangle" stroke="#000000" fill="#000000" transform="translate(400.223611, 262.930718) rotate(-45.000000) translate(-400.223611, -262.930718) " x="440.723611" y="300.930718" width="41" height="46"></Rect>
<Rect id="Rectangle" stroke="#000000" fill="#000000" transform="translate(481.794679, 552.516504) rotate(-45.000000) translate(-481.794679, -552.516504) " x="461.794679" y="525.516504" width="40" height="54"></Rect>
<Rect id="Rectangle" stroke="#000000" fill="#000000" transform="translate(486.235804, 697.148232) rotate(45.000000) translate(-486.235804, -697.148232) " x="464.735804" y="671.648232" width="43" height="51"></Rect>
<Rect id="Rectangle" stroke="#000000" fill="#000000" transform="translate(488.244426, 399.637825) rotate(45.000000) translate(-488.244426, -399.637825) " x="466.744426" y="366.637825" width="43" height="66"></Rect>
<Rect id="Rectangle" stroke="#000000" fill="#000000" transform="translate(363.430718, 723.930718) rotate(-45.000000) translate(-363.430718, -723.930718) " x="343.430718" y="704.930718" width="40" height="38"></Rect>
<Rect id="Rectangle" stroke="#000000" fill="#000000" transform="translate(498.284271, 856.748737) rotate(-45.000000) translate(-498.284271, -856.748737) " x="475.784271" y="835.248737" width="45" height="43"></Rect>
</G></G></Svg>
This was some sample code for creating those connecting lines in the image. In svg you can easily create tilted graphics and fix their positions. It will automatically become responsive as per screen resolution.
Related
we are at the end of our knowledge.
We are using a twig template that is generating a html page which is then rendered by wkhtmltopdf as a PDF on an Ubuntu 18.04 machine.
The current issue is, that we also moved a lot of old EPS files to SVG by using Inkscape and everything works as expected. The images are shown on the PDFs.
Now all our new images are created with AI and saved as well working SVGs like this one:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 411.02 411.02" style="enable-background:new 0 0 411.02 411.02;" xml:space="preserve">
<style type="text/css">
.st0{fill:#575756;}
.st1{fill:none;stroke:#575756;stroke-width:2.8347;stroke-linejoin:round;stroke-miterlimit:3.8637;}
.st2{fill:#A8A8A7;stroke:#FFFFFF;stroke-width:0.5536;stroke-linejoin:round;stroke-miterlimit:22.9256;}
.st3{fill:none;stroke:#FFFFFF;stroke-width:0.5536;stroke-linejoin:round;stroke-miterlimit:22.9256;}
.st4{fill:#DADADA;stroke:#FFFFFF;stroke-width:0.5536;stroke-linejoin:round;stroke-miterlimit:22.9256;}
.st5{fill:#FFFFFF;}
.st6{display:none;}
.st7{display:inline;}
.st8{font-family:'HelveticaNeueLTPro-Roman';}
.st9{font-size:29.5px;}
.st10{letter-spacing:2;}
.st11{letter-spacing:-2;}
</style>
<g id="elements">
<g>
<polygon class="st0" points="368.71,103 365.16,111.5 361.62,103 368.71,103 368.71,103 "/>
<polygon class="st0" points="368.71,78.61 365.16,70.11 361.62,78.61 368.71,78.61 368.71,78.61 "/>
<line class="st1" x1="365.16" y1="75.86" x2="365.16" y2="106.24"/>
</g>
<g>
<polygon class="st0" points="368.71,324.49 365.16,332.99 361.62,324.49 368.71,324.49 368.71,324.49 "/>
<polygon class="st0" points="368.71,203.75 365.16,195.25 361.62,203.75 368.71,203.75 368.71,203.75 "/>
<line class="st1" x1="365.16" y1="200.99" x2="365.16" y2="327.73"/>
</g>
<g>
<polygon class="st0" points="81.42,345.6 72.92,342.06 81.42,338.52 81.42,345.6 81.42,345.6 "/>
<polygon class="st0" points="349.57,345.6 358.08,342.06 349.57,338.52 349.57,345.6 349.57,345.6 "/>
<line class="st1" x1="352.33" y1="342.06" x2="78.19" y2="342.06"/>
</g>
<g>
<path class="st2" d="M118.14,334.55l-40.3-3.91l-4.91-5.86v-32.87h4.68v-54.02h-4.68v-32.87l4.91-5.86l40.3-3.91h227.47
c7.75,0,14.03,6.28,14.03,14.0
...
But those SVGs do not get rendered. There is always a white space and we tried all possible embed/img/iframe/object/... methods.
I know there could be several reasons but maybe someone encountered a similiar issue. If anything else is needed as information please let me know.
Thanks!
I had the same problem, my solution is :-
Add size internally to SVG.
In your example: width="411.02px" height="411.02px"
Answer use
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="411.02px" height="411.02px" viewBox="0 0 411.02 411.02" style="enable-background:new 0 0 411.02 411.02;" xml:space="preserve">
It may be difficult to see but here is the SVG you posted. I wont repeat the snippet but for others testing, mention the last <g> needs to be changed to </g></svg> and remove unfinished last section.
Showing just the top half of each A4 page (my default)
On the Left is the way it would appear printed from Microsoft Edge.
On the right is the WkhtmltoPDF output (wkhtmltox-0.12.6-1.mxe-cross-win64 in Windows 10) from the same page but with some noticeable problems.
You are using Ubuntu 18.04 thus depending on that compiled version may get different results.
You can see on the left I asked the SVG be placed in the <centre>
But on the right WkhtmltoPDF has offset it further right
However, this may be in part due to the second problem.
The Output on the left was at 1:1 scale, however to get similar proportions in Wkhtmltopdf I had to scale the x:y value 2:1 (which value is actually more units than the notional page width) anyway here is the code for that output.
<!DOCTYPE html><html><head><style>
body {background: transparent; width=794px}
</style></head><body>Hello<center>
<img src="testing.svg" width=822px height=411px />
<br>Figure 1</center><br>World</body></html>
command line wkhtmltopdf.exe --enable-local-file-access local.htm testing.pdf
I am drawing a couple circles ontop of a zoomable image. I want the circles to be hole views so the holes highlight the image behind it. So I am using a mask to draw the rect to darken the image and then circles to highlight parts of the image. I group together the mask and the rectangle and do the transformation on the mask. When the image is not zoomed in, everything is perfect. When I zoom in and pan the image, the circles stay where they are supposed to, but the background rect does not translate from the transformations.
<Svg
height={imageDetails.HEIGHT}
width={imageDetails.WIDTH}
pointerEvents='none'>
<G transform={{
translateX: delta.x,
translateY: delta.y,
scale: delta.zoom
}} >
<Defs>
<Mask id={`clip`} >
<Rect fill="#fff" strokeWidth='5' stroke='white'
originX={delta.x * delta.zoom}
width={imageDetails.WIDTH * delta.zoom} height={imageDetails.HEIGHT} />
{data.map(item =>
<Circle r={item.size} cx={item.x} cy={item.y} key={item.key} fill='#000' />
)}
</Mask>
</Defs>
<Rect width={imageDetails.WIDTH} height={imageDetails.HEIGHT} clipRule={'evenodd'}
fillRule={'nonzero'} stroke='blue' strokeWidth='2' vectorEffect='inherit'
fill="rgba(0,0,0,.5)" fillOpacity='.7' mask={`url(#clip)`} />
</G>
</Svg>
I have played around with trying to transform the mask and the rect inside, but nothing.
Here are my screen shots show the full image, then zooming in, and the zooming in even more.
So my knowledge of SVG is limited, but I am learning. What I believe was happening was that the transformation was being applied to the everything, but the masked rect width and height are set to a value. Upon doing a scale, the width and height stay the exact same, so that is why it is being cut off. I had to change it so the transformation was being applied to the mask circles. So the mask rect will fill the whole screen always, and the circles will receive the transformation. Hopefully this helps anyone facing this issue.
<Svg
height={imageDetails.HEIGHT}
width={imageDetails.WIDTH}
pointerEvents='none'>
<G >
<Defs>
<Mask id={`clip`} >
<Rect fill="#fff" width='100%' height='100%' />
{data.map(item =>
<Circle
transform={{
translateX: delta.x,
translateY: delta.y,
scale: delta.zoom
}}
r={item.size} cx={item.x} cy={item.y} key={item.key} fill='#000' />
)}
</Mask>
</Defs>
<Rect width='100%' height='100%'
fill="rgba(0,0,0,.5)" fillOpacity='.7' mask={`url(#clip)`} />
</Svg>
I have noticed that when I use Apache Batik to transcode SVG documents to PDF's that have an opacity set to less than one Batik will create a raster version of the SVG and place it in the pdf instead. When dealing with print this is not desirable. Is there any reason Batik does this? Is there anyway to avoid this flattening of SVG documents regardless of their opacity?
Our code to create the transcoder:
PDFTranscoder pdfTranscoder = new PDFTranscoder();
pdfTranscoder.addTranscodingHint(PDFTranscoder.KEY_PIXEL_UNIT_TO_MILLIMETER, PIXEL_CONVERSION);
pdfTranscoder.addTranscodingHint(PDFTranscoder.KEY_AUTO_FONTS, false);
We then take the SVG which is returned form element.getEncodedData() as an SVG string.
TranscoderInput input = new TranscoderInput(new ByteArrayInputStream(element.getEncodedData().getBytes()));
TranscoderOutput output = new TranscoderOutput(byteStream);
pdfTranscoder.transcode(input, output);
For opacity we edit the SVG adding a group. Consider the following svg: Note many markup tags have been removed to keep the example concise:
<svg>
<rect x="100" y="100" width="100" height="100" />
</svg>
We would edit this SVG to appear as
<svg>
<g opacity="0.5">
<rect x="100" y="100" width="100" height="100" />
</g>
</svg>
I have the following SVG:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="800" height="150" viewBox="0 0 800 150" xml:space="preserve">
<linearGradient id="SVGID_0" gradientUnits="userSpaceOnUse" x1="-400" y1="-150" x2="-400" y2="0">
<stop offset="0%" style="stop-color:rgb(255,64,64);stop-opacity: 1"/>
<stop offset="100%" style="stop-color:rgb(230,57,155);stop-opacity: 1"/>
</linearGradient>
<rect x="-400" y="-75" rx="0" ry="0" width="800" height="150" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: url(#SVGID_0); fill-rule: nonzero; opacity: 1;" transform="translate(400.5 75.5)"/>
</svg>
I am converting this to PDF using TCPDF:
$pdf->ImageSVG($file='images/testsvg.svg', $x=0, $y=0, $w='', $h='', $align='', $palign='', $border=0, $fitonpage=true);
As you can see from the image below, the gradient is applied wrongly.
Based on the illustrator image, it seems like TCPDF applies the center of the gradient to the bottom edge. If I manually move the center to the top edge then it looks very close to the original.
Any idea how I can fix this?
I think it's because of how the rect is positioned. It actually starts outside the viewbox and then both the gradient and the box get transformed. For example the box and the gradient x parameter are both -400. This is overly complex and I think some of the parameters are getting cancelled out by the $fitonpage=true parameter or the translations are being applied differently:
<rect x="-400" y="-75" rx="0" ry="0" width="800" height="150" style="... transform="translate(400.5 75.5)"/>
Based on the supplied examples there isn't really any point to this trickery. The only purpose appears to be modifying the gradient start and end colors. I would just move the rect to start at 0,0, remove the transforms, and then modify the gradient colors and stops to achieve the same effect the correct way:
<linearGradient y2="150" x2="0" y1="0" x1="0" gradientUnits="userSpaceOnUse" id="SVGID_0">
<stop
style="stop-color:#f13c73;stop-opacity:1"
id="stop4139"
offset="0" />
<stop
style="stop-color:#e6399b;stop-opacity:1"
id="stop4141"
offset="0.40" />
</linearGradient>
<rect
id="rect4143"
style="opacity:1;fill:url(#SVGID_0);fill-rule:nonzero;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none"
height="150"
width="800"
ry="0"
rx="0"
y="0"
x="0" />
The changes that matter are the removal of all the strange negative offsets on the rect and gradient and the change of the gradient stop colors and position to recreate the same gradient without the need to use cropping and transforms.
I'm having problems with Webkit browsers (e.g., Chrome, Safari) and changing patterned fills in SVG objects. The example below tries to toggle the fill of a rectangle between a solid red and the google logo on hover:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="275" height="95">
<image xlink:href="http://www.google.com/intl/en_com/images/srpr/logo3w.png" x="0" y="0" width="275" height="95" />
</pattern>
</defs>
<rect id="rect" width="550" height="190" style="fill:url(#img1);stroke-width:1;stroke:rgb(0,0,0)">
<set attributeName="fill" from="url(#img1)" to="red" begin="mouseover" end="mouseout"/>
</rect>
</svg>
In Chrome/Safari, the rectangle correctly fills the rectangle with the google logo pattern on load. On mouse over, the rectangle fill switches to red. On mouse out, the fill appears as white rather than swapping back to the google logo.