I'm a graphic designer and I work with vector graphic (.svg).
I have a problem with my website and SVG links. Everything work just fine in Chrome (Desktop) and on Android and Windows mobile OS. The problem is just in iOS (Safari, Chrome,...), where I can see the SVG shape but not able to click on it.
<g class="Facebook">
<a href="http://www.facebook.com/Muhedinovic14" target="_blank">
<circle fill="#FFFFFF" cx="576.691" cy="646.241" r="46.112"/>
<path fill="#1B1B1B" d="M576.689,600.129c-25.467,0-46.111,20.646-46.111,46.114c0,25.467,20.645,46.11,46.111,46.11
s46.115-20.644,46.115-46.11C622.805,620.774,602.156,600.129,576.689,600.129z M576.689,690.432
c-24.404,0-44.189-19.786-44.189-44.188c0-24.406,19.785-44.192,44.189-44.192c24.406,0,44.191,19.786,44.191,44.192
C620.881,670.646,601.096,690.432,576.689,690.432z"/>
<path fill="#1B1B1B" d="M576.689,604.386c-23.117,0-41.857,18.74-41.857,41.857c0,23.118,18.74,41.858,41.857,41.858
c0.695,0,1.375-0.072,2.061-0.105v-0.01v-8.912v-21.22h-10.455v-12.109h10.455v-8.93c0-10.362,6.334-16.008,15.582-16.008
c4.424,0,8.23,0.331,9.338,0.478v10.83l-6.408,0.005c-5.029,0-6.008,2.388-6.008,5.895v7.73h11.994l-1.563,12.109h-10.432v21.22
v6.356v0.015c15.926-5.926,27.293-21.214,27.293-39.202C618.547,623.126,599.807,604.386,576.689,604.386z"/>
CSS:
.Facebook:hover path {
fill: #485A96;
Please visit www.vector.ba to see details.
Any kind of help would be great. Thanks!
Safari does not yet support href for links. You need to change the attribute to xlink:href instead.
Related
I have looked at and tried the first Ten examples of how to accomplish this on google and none of them work. I was able to only get one FontAwesome icon to work and that was the glyph five icon and it still wont work. Has anyone here been able to get this to work recently and if not, are there any alternatives to FontAwesome? I dont realy want to use images because the scale doesnt look right when going from an iPhone 5 to an ipad pro.
I was struggling with this issue. Fortunately, I got the right result at last. Please follow the checklist below:
Make sure your icon exists in the font files. Some icons are only available in Solid font. Check it on the FontAwesome web site. Also, you can try to set the FontAttribute of the Label as "Bold".
Place the font files in the Resources folder, such as Resources\Font Awesome 5 Free-Solid-900.otf. Then add the section below into the info.plist:
<key>UIAppFonts</key>
<array>
<string>Font Awesome 5 Brands-Regular-400.otf</string>
<string>Font Awesome 5 Free-Regular-400.otf</string>
<string>Font Awesome 5 Free-Solid-900.otf</string>
</array>
Make sure you select the right font name, not the file name. You can define a style as shown below:
<OnPlatform x:Key="FontAwesomeString" x:TypeArguments="x:String">
<On Platform="iOS" Value="Font Awesome 5 Free" />
<On Platform="Android" Value="Font Awesome 5 Free-Solid-900.otf#Font Awesome 5 Free Solid" />
<On Platform="UWP" Value="Assets/fonts/Font Awesome 5 Free-Solid-900.otf#Font Awesome 5 Free" />
So you can use the style like this:
<Label Text="{Binding Icon}" FontAttributes="Bold"
Style="{StaticResource FontAwesome}" />
If you use it in XAML, use it like: Text="" Use &#x before the font code.
If you use it in C# code, use it like: Text="\uf015"; Use \uf before the font code.
No need to "Copy to Output Directory". Just set the BuildAction as BundleResource.
Hope it would be helpful.
I am looking into using an image as an SVG fill. I am currently using the following SVG markup:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="logo" x="0px" y="0px" viewBox="0 0 200 25" enable-background="new 0 0 0 0" xml:space="preserve">
<defs>
<pattern id="bg" patternUnits="userSpaceOnUse" width="300" height="25">
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..." preserveAspectRatio="xMidYMid slice"></image>
</pattern>
</defs>
<g class="graphic">
<path d="..."></path>
</g>
(I have left some details out ("...") of which I am sure are not relevant to my issue.)
In CSS, I use the following code to append the pattern ID. Pls see below:
.default-header .site-name svg.logo .graphic {
fill:url(#bg);
}
I've already done some digging and found out that this technique (images as SVG background) isn't supported in FireFox and iOS Safari. Therefore I used the following "fall-back" method in CSS:
.default-header .site-name svg.logo .graphic {
fill:#ddd;
}
#supports (-webkit-appearance:none) {
.default-header .site-name svg.logo .graphic {
fill:url(#bg);
}
}
The above code works, EXCEPT for iOS 8/9's Safari. So my issue is mainly that I don't know how to target those non-supporting browsers, which I'm sure there are more of than I am currently testing. SO... I decided to use Modernizr to look for support, but I can't seeem to find an appropriate, representational way of checking if this SVG technique is supported. In other words, on this page: https://modernizr.com/download?setclasses, I can't find the browser feature appropriate for my issue.
I hope somebody knows what direction I could best look into or better yet, has some experience with this technique, which I still think is so awesome (if it works).
Thanks in advance guys!
I found a solution by using a different approach in markup. Instead of using defs and gs, I used the following markup to achieve the same effect:
<svg id="graphic" width="300" height="40">
<!-- Graphic: Styling (inline as FF fix) -->
<style> svg image { clip-path:url(#clipping); } </style>
<!-- Clip Path -->
<clipPath id="clipping">
<!-- this might as well be any type of path -->
<text id="graphicText" x="0" y="37">My Text</text>
</clipPath>
<!-- Image -->
<image id="graphicImage" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{img_url}" width="300" height="300" x="0" y="-120px"></image>
</svg>
I used CSS styling for the text itself.
Hope this helps someone!
I am struggling to get my little ionic app to show an SVG file in IOS using the IonicFramework.
It works in the browser and also on Android 5.0 but when I try it out in IOS my flag does not appear.
If i add the flag hardcoded into the html the flag appears as it should...
Hmm what am i doing wrong?? The example is based on a new Ionic project using the blank template...
JS snippet:
.controller('myCtrl', function($scope) {
var flag='<polygon points="0 0,0 60,120 40,120 20" fill="white" /><polygon points="0 0,24 4,24 56,0 60" fill="red" /><polygon points="48 8,72 12,72 48,48 52" fill="red" /><polygon points="96 16,120 20,120 40,96 44" fill="red" /><polygon points="0 0,0 60,120 40,120 20" fill="none" stroke="black" stroke-width="0.1" />';
$scope.myflag = flag;
});
HTML snippet:
<p>Postponed! (does not work)</p>
<svg ng-bind-html="myflag"></svg>
http://codepen.io/flemmingdjensen/pen/XbRKLV
Inside my asp.net MVC web application i need to display pdf in safari browser in iPad. my code is like this.
<object data="#Model.StringPdfUrl" type="application/pdf">
<embed src="#Model.StringPdfUrl" type="application/pdf" />
</object>
Does anybody know about the fix for this issue.
Thank you in advanced
I wonder if this is not the same issue I once had with Internet Explorer.
Even with the latest IE 11, if the url doesn't end with the extension .pdf (which was the case with my MVC app: the url was like /File/Download/4587), then IE plug-in could not render the PDF file. Same issue with <embed>.
I tried the iframe solution, but on some computers the document opened up in a new window.
In the end, the solution I implemented was to convert each page of the PDF document into an image with GhostscriptSharp, and then to render the document online as images in an HTML page (with navigation controls to go to first/previous/next/last page).
I Found a solution.
I used iframe to render pdf in safari
if (Request.Browser.Type.Contains("Safari"))
{
<iframe src="#Model.StringPdfUrl" height="750" width="600" frameborder="0" id="myiframe" ></iframe>
}
else
{
<object height="750" width="600" data="#Model.StringPdfUrl" type="application/pdf">
<embed src="#Model.StringPdfUrl" type="application/pdf" />
</object>
}
I have the following problem:
I am programming with mvc .NET . In my views I use some SVG along with the HTML5.
The results are ( not surprisingly) displayed in different ways in different browsers.
I am working with IE 11, Firefox 25.0.1 and Chrome 31.
Because there a really big differences, I looked for solutions to match the results.
But until now I did not find a general solution to this problem. Is there any?
For example I have an svg image, which should scale to match the window-width.
It does in Firefox and Chrome, it doesn't in IE.
I have some links in this image, those are only displayed in IE, but neither in Firefox or Chrome.
Do I need to find a specific solution for every of my problems, or did I miss something out?
EDIT:
Here is the code for my example:
<svg width="100%" viewbox="0 0 854 748" xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">
<image x="0" y="0" width="100%" height="100%" xlink:href="~/Images/logo.gif"/>
<a xlink:type="simple" xlink:href="http://www.google.com">
<rect x="46.83%" y="0%" width="8.2%" height="4.5%" fill="red" fill-opacity="0.0"></rect>
</a>
</svg>