My page is tomblex.com.
There is a green vector ribbon which is positioned differently in Safari.
I was going to use PHP to make a separate stylesheet but I thought that might be very difficult, so I thought I might first ask here.
This is the HTML code that displays differently:
<div style="position:relative;top: -192;left:-541;"id="wrapper">
<img style="position:absolute;width:1083;height:77px;"
src="http://www.tomblex.com/leengchoste.png">
</div>
Related
Download an svg with fontawesome icons
Hi everybody,
from a couple of days I've tried to implement the download of an svg, generated with d3 version 3.5.5, inside which there are fontawesome icons.
Those icons have to be filled with a custom color, specified in an ajax service from server.
The "download" action itself it's simple and works but the generated svg doesn't render the icons: it shows empty and bordered squares, as it doesn't recognize the font.
Now in the svg, as you can see in the jsfiddle, icons are inside a tspan inside the ".legend-container".
I've tried these these solutions:
link fontawesome inside svg
<link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.5.0/css/all.min.css" type="text/css"/>
nope (but I may have done something wrong)
svg local css: nope
tspan replaced with an image that's linked to an external icon svg linked. I changed the icon color with a stunning function that calculates the filter property starting from an hex.
This last solution works but I have to replace that elements (text and tspan) with "g" tags, and this break the legend layout, making very difficoult to put every element (has to be responsive, as possible) in the structure.
Does anybody have any idea?
I'm opened to every other solutions.
Sorry for my english, I hope I'm making myself clear.
Thank you for reading!
i put iframe of Bandcamp embeded player on my website, but the background-image of my track look blurry.
i made this cover in Illustrator in 2400x2400 and i exported in Png24.. When i look the background image in Bandcamp the image seems in good quality.. i dont understand what to do to view the cover in my website in good quality.
you can see it in https://mauditemachine.com/
i tried to see what happened if i change the background-image to 1 instead of 8
<div id="art" class="item" style="background-image: url("https://f4.bcbits.com/img/a2126636077_8.jpg");"></div>
i see a better quality but i cant force it..
when i tried to change the size to 400x400 in the iframe code i have better results but i want to have 300x300 sizing.
i just change iframe parameters to select 100% for width and height.
In my Css i put width and height to 400px to a container above and for responsive design i put 300px
I’m working with an SVG on a website, and everything works fine except in Safari. Safari displays my SVG with a completely different font than what I used for the graphic.
Correct Rendering
This is how it’s supposed to display.
Safari Rendering
This is how Safari renders it.
I don’t have a lot of experience with using SVGs in web design, but I’m using CSS to set it as a background-image like I would anything. I can’t figure out what I’m doing wrong.
.titleContainer{
background-image: url(‘../img/logo.svg’)
}
This is most likely because you should "convert to outline" when you export the SVG from your design program. I could imagine that you selected to embed the font.
Ie in Adobe Illustrator you have the option to outline the font when you export:
Adobe Illustrator example
I have a SVG and want to display some text within that. Due to the limited text formatting options available in SVG I've read that it can be recommended to use HTML for text instead. Thus, inside of the SVG whenever I want to show text I have a foreignObject and within that a text p.
So the structure is: SVG -> foreignObject -> p
Works well so far! However, I cannot select the text within the p with the mouse. Is there any workaround?
EDIT:
Looks like it works in an easy example as shown in the answer below, but for some reason it does not work in this structure here.
Works perfectly fine for me.
<svg width="200px" height="80px">
<foreignObject width="200px" height="80px">
<html style="font-size:30px">
<p>Select me</p>
</html>
</foreignObject>
</svg>
This should be simple:
I want to use SVG images in a responsive layout. It all appears to work fine, including in IE 9+ when I've tested in Browser Stack. However, on the Can I Use website it says "IE9-11 desktop & mobile don't properly scale SVG files. Adding height, width, viewBox, and CSS rules seem to be the best workaround." I've spent hours looking into workarounds given on the internet, but being a newbie I don't understand them. And it appears to work without any workarounds! Is this code okay?
Here is my HTML:
<div class="content">
<img src="resources/test.svg">
</div>
Here is my CSS
img {width:100%;}
.content {max-width:700px; margin:0 auto;}
Thank you ever-so-much
It depends on the contents of your SVG. It should work okay as long as your SVG has a viewBox but does not specify a width or height.
See: SVG in img element proportions not respected in ie9