struggling with issue how to set background image - static or SVG shape for top right corner in way it's pulled from outside of view area.
Imagine you have site with minimal width ~ 1000 px - image is clipped in top right corner partially. When width of page will grow to max width image will be unclipped / unmasked fully.
There is no scale in size of image. Just horizontal clipp / mask - attached screenshots might give such impression but it's just because of different scale while making print screen.
Image in top left stays all the time. Red rectangle represents page area.
Top right image is like
<svg width="1868" height="899" viewBox="0 0 1868 899" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1044.32 -1144.66L1757.62 -735.936C1825.92 -696.799 1868 -624.454 1868 -546.161V271.161C1868 349.454 1825.92 421.799 1757.62 460.936L1044.32 869.66C976.052 908.78 891.948 908.78 823.677 869.66L110.379 460.936C42.0777 421.799 0 349.454 0 271.161L0 -546.161C0 -624.454 42.0777 -696.799 110.379 -735.936L823.677 -1144.66C891.948 -1183.78 976.052 -1183.78 1044.32 -1144.66Z" fill="#17212F"/>
</svg>
Any ideas?
Kind Regards,
Jan
Related
My sky image will display with material side:back but not with side:front... I'm mystified. Currently showing with side:back here:
https://dour-blouse.glitch.me/
The image is reversed, and I don't want it to be. If side:back is correct, should I just flip the image in photoshop?
you can flip the image using the scale attribute (setting the scale to -1 inverts the image in either axis) , and then switch the visible side:
scale="-1 1 1" material="shader: flat; side: front; src:#nyc"
I designed a shape in Illustrator and trimmed artboard to shape so no outside white space. I've done this twice to be sure.
When I open it in Chrome and inspect. If I hover over the whole SVG tag it's tight to the shape. If I hover over the path, there's a white space/padding left (and top, actually) - see screenshot.
It means when I place or animate the shape it's not right. I don't know how I can get rid of it - any ideas?
Code:
<div style="margin:100px">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 157.144 210.706">
<path fill="#444" d="M78.394 210.706c-11.247-13.16-22.162-25.304-32.368-38.017-16.016-19.95-30.158-41.092-39.98-64.948-19.25-46.76 9.943-94.135 52.535-105.196 45.651-11.856 91.876 19.016 97.966 65.671 2.028 15.534-1.288 29.968-7.385 44.017-11.15 25.692-27.51 48.023-45.258 69.398-7.965 9.593-16.436 18.766-25.51 29.075zm52.722-131.714c.046-29.268-23.232-52.857-52.283-52.982-28.984-.125-52.775 23.526-52.815 52.506-.041 29.231 23.339 52.858 52.341 52.895 29.291.038 52.712-23.233 52.757-52.419z"/>
</svg>
</div>
It seems Chrome is taking into account the control points when painting the bounding box:
You can avoid this by reordering your control points, and this creates a better shape for your pin:
Here's the Path, but I did it quickly, you might want to redraw it yourself with more care.
<path d="m78.394,211.00938c-11.247,-13.16 -22.162,-25.304 -32.368,-38.017c-16.016,-19.95 -44.72017,-56.5643 -45.74419,-94.98246c-1.02402,-38.41816 32.67117,-77.86771 78.32217,-77.89195c45.651,-0.02424 78.27532,41.16539 78.54978,79.92979c0.27446,38.7644 -35.50176,80.51162 -53.24976,101.88662c-7.965,9.593 -16.436,18.766 -25.51,29.075zm52.722,-131.714c0.046,-29.268 -23.232,-52.857 -52.283,-52.982c-28.984,-0.125 -52.775,23.526 -52.815,52.506c-0.041,29.231 23.339,52.858 52.341,52.895c29.291,0.038 52.712,-23.233 52.757,-52.419z" fill="#444"/>
My use case is probably a bit unique, but I am creating a dynamically-sized square grid using DOM elements encased in a flexbox. Each DOM element has an SVG image background and a height/width equal to calc(100vmin / <gridSize>). The SVG elements are simple:
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<path stroke-width="2" stroke="#000" stroke-linecap="square" d="M0,50 h100 M50,0 v50"/>
</svg>
However, I noticed that some lines appear darker than others, and there are gaps between some SVG lines. (See picture below) I'm assuming this is due to pixel rounding because when I resize the browser, the gaps and thicknesses jump around.
I tried to round the pixels from the calc, but I am using styled-components so I am unable to use SASS / LESS functions like floor / ceil. I also noticed making the stroke width thicker alleviates the problem, but I would prefer to keep my lines thin.
Are there other ways I can make the lines consistent?
It's antialiasing. Setting shape-rendering="crispEdges" will turn it off on most UAs.
vector-effect='non-scaling-stroke'
non-scaling-stroke
This value modifies the way an object is stroked. Normally stroking involves calculating stroke outline of the shapeʼs path in current user coordinate system and filling that outline with the stroke paint (color or gradient). The resulting visual effect of this value is that the stroke width is not dependent on the transformations of the element (including non-uniform scaling and shear transformations) and zoom level.
MDN web docs
I have picture s such as 33*120 (height*width)
it is transparent ping,so this size is including transparent area.
My code is like this
in xml
<ImageView id="Pic"/>
in tss
"#Pic": {
backgroundColor:'blue',
image:"./img/menuj.png"
textAlign:Ti.UI.TEXT_ALIGNMENT_LEFT,
height:'10%',
left:'1%',
},
I would like to adjust imageview size to 10% height and width should keep the same ratio as original image size.
But,blue area(view) is much wider than I expected.
(blue area appears much bigger than image itself,moreover image file is not even left aligned in the view.)
How can I fit the ImageView to the image size?
just pass to the imageview the height and width of the original image (in your case, since you want a different height, the image might get stretched/shrinked).
Like this:
"#Pic": {
backgroundColor:'blue',
image:"./img/menuj.png"
textAlign:Ti.UI.TEXT_ALIGNMENT_LEFT,
height:'10%',
width: "120px"//PUT HERE THE WIDTH OF THE ORIGINAL IMAGE
left:'1%',
}
One last thing, drop the comma at the end of the tss description, it's not required.
I've used this tutorial - http://www.netzgesta.de/mapper/ to create an interactive map (http://teamworksdesign.com/clients/neurosign/contact/alabama/), the problem is I want to enlarge it by 10-20% to fill the space a bit better.
I've used these two images:
And the svg:
http://teamworksdesign.com/clients/neurosign/wp-content/themes/default/images/usa_map.svg
Obviously the png is easy enough to enlarge in PS but how can I enlarge the svg whilst keeping all it's coordinates in place?
UPDATE:
Changing this line below on the svg doesn't affect the size of the svg, the hover states just stay the same original size:
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 432 275">
SVG is a vector-format. So if you just change the width and height-attributes on the root-element to 100% each and leave the viewport on the original pixel-values, it will fill the available space while every coordinate is re-calculated by the parser. The sized of the displayed picture now depends on where it is embedded.
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 432 275">
Also, instead using JavaScript for hover-effects, I would use CSS (e.g. polygon:hover { fill: #32cd32; }).
Change the width and height in pixels, but keep the viewBox as it is. For example, to double to size:
<svg width="832px" height="550px" viewBox="0 0 432 275" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">