I have an inline SVG inside which I have links to other divs.
On desktop and android mobile devices everything works fine whereas on iPad and iPhone it doesn't.
When I tap on the link it flashes as if it has recognised that it is a link but no action takes place.
My SVG is a map with 15 icons on it and is very very long so there's a greatly simplified
jsfiddle here
Or CSS and HTML below
#link {
margin-top: 1000px;
height: 100px;
width: 100px;
background: red;
}
<svg id="mapImage" version="1.1" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<clipPath id="p.0">
<path d="m0 0l960.0 0l0 720.0l-960.0 0l0 -720.0z" clip-rule="nonzero"></path>
</clipPath>
<g clip-path="url(#p.0)">
<path fill="#cfe2f3" d="m56.047245 81.91601l143.3386 0l0 129.35434l-143.3386 0z" fill-rule="nonzero"></path>
<a xlink:href="#link">
<path fill="#0000ff" d="m102.396324 123.95276l45.25985 0l0 36.629913l-45.25985 0z" fill-rule="nonzero"></path>
</a>
</g>
</svg>
<div id="link">Linked div</div>
Links to external websites embedded in the SVG work fine on iOS as do normal HTML a href links to both external websites and other divs.
Can I edit the inline SVG so that the links work on iOS? If not would javascript be the solution?
This may or not be the right way to do things but it works.
I removed xlink:href="#" from the anchor tag, gave each one an id then used really simple jquery to open the hidden div.
I have a feeling this breaks rules somewhere but it's the best I can come up with at the moment. Other advice and opinions are welcome.
HTML, CSS, jQuery below:
$('#linkTo').click(function() {
$("#hiddenDiv").toggle();
});
#hiddenDiv {
display: none;
height: 100px;
width: 100px;
background: red;
}
.link {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg id="mapImage" version="1.1" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<clipPath id="p.0">
<path d="m0 0l960.0 0l0 720.0l-960.0 0l0 -720.0z" clip-rule="nonzero"></path>
</clipPath>
<g clip-path="url(#p.0)">
<path fill="#cfe2f3" d="m56.047245 81.91601l143.3386 0l0 129.35434l-143.3386 0z" fill-rule="nonzero"></path>
<a id="linkTo" class="link">
<path fill="#0000ff" d="m102.396324 123.95276l45.25985 0l0 36.629913l-45.25985 0z" fill-rule="nonzero"></path>
</a>
</g>
</svg>
<div id="hiddenDiv">
</div>
jsfiddle here
TLDR; The answer is to attach a click event, setting location.href to the element. in IOS it seems anchors don't work.
Related
I am trying to define a fixed stroke width into my SVG, similar to this thread.
In my devenv (VS 2017) I am running Edge and the project is targeting .net 4.6.1
The SVG is defined as:
<svg version="1.1"
baseProfile="full"
width="100%" height="Auto"
viewBox="0 0 #sheet.SheetShape.Bounds.Width #sheet.SheetShape.Bounds.Height"
xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" stroke="red" fill="white" />
#foreach (var cut in sheet.SheetCuts)
{
<line vector-effect="non-scaling-stroke" stroke-width="2" stroke="black" stroke-dasharray="5, 5" x1=#cut.Start.X y1=#cut.Start.Y x2=#cut.End.X y2=#cut.End.Y />
}
The vector-effect property is not recognized by VS intellisense and when the code runs nothing special happens.
What should be wrong?
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 working on a legacy application which works in ie but not in Safari.
The image in the code will not render in Safari.
<section class="feature pointer clickableSection tooltipContainer" id="SearchSection"
data-scd-nextScreen="#Url.Action("FullSearch", "Company")"data-placement="bottom"
data-toggle="tooltip" data-title="Click here to SEARCH Addresses">
<img src="#Url.Content("~/images/phonebook.png")" alt="Click here to SEARCH Addresses" />
<h3><span style="text-decoration: underline">Search Addresses</span><span id="searchHeading"></span></h3>
<div class="loadMessage"></div>
</section>
I have got the Safari Web Inspector up and running, but I cannot see where I can find out where the problem is. I am new to using this tool.
I found where the problem is.
In my CSS which I did not publish, it has;
section.feature img {
color: #999;
/*content: attr(alt);*/
font-size: 1.5em;
font-weight: 600;
height: 140px;
width: 200px;
}
I have commented out the line that is not compatable with Safari, ie content: attr(alt);
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>
I want to use a lightbox like Shadowbox or similar inside a Firefox extension. But Shadowbox causes Javascript errors like this:
Error: document.write is not a function
Source file: chrome://iframe/content/shadowbox/shadowbox.js
Line: 1557
Which lightbox supports IFRAMEs and will run correctly inside an extension (ie. added to the overlay XUL)?
Which kind of feature are you looking for?
Is it that you can popup "overlays" over the content? The XUL equivelant of overlays are panels. You can also easily add an iframe to XUL by using the HTML namespace. I would not recommend it though, but use some simple javascript to change the content of the panel instead.
You can also try with stack. Here is a small example :
<?xml version="1.0"?>
<!DOCTYPE window PUBLIC "-//MOZILLA//DTD XUL V1.0//EN" "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?>
<window id="test"
title="test"
xmlns:html="http://www.w3.org/1999/xhtml"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:svg="http://www.w3.org/2000/svg">
<stack>
<hbox>
<vbox>
<hbox>
<label value="123"/>
</hbox>
<hbox>
<label value="456"/>
</hbox>
<html:iframe style="width: 800px; height: 400px;" src="http://www.google.com"/>
</vbox>
</hbox>
<vbox style="position: absolute;opacity: 0.5;">
<html:iframe style="position: absolute; top: 100px; left: 100px; width: 500px;" src="http://www.google.com"/>
</vbox>
</stack>
</window>
Quite possibly none. Lightboxes are meant to work with (X)HTML, not XUL.