So I really need to make each individual path ID in my SVG its own button. I have tried adding around each of the tags, but it actually just makes the entire svg disappear.
PLEASE HELP!
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="262px" height="644px" viewBox="128 65.25 262 644" enable-background="new 128 65.25 262 644" xml:space="preserve">
<g id="skull">
<path id="skull" opacity="0.5" fill="#5CCAE8" enable-background="new " d="M237.026 122.5 c1.92 7.2 3.3 7.6 3 10.028c-0.341 2.388-0.375 10.5 10.1 11.58c10.522 1.1 22.9 1.6 26.282-5.134 c0 0 1.338-8.834 2.817-10.267c1.479-1.433 0.765-4.775 1.958-6.208c1.192-1.433 3.485-23.877-1.958-32.233 c-5.444-8.357-7.435-12.655-21.124-12.655c-13.69 0-19.059 8.118-20.193 10.028c-1.137 1.91-1.455 5.253-2.251 6.5 c-0.795 1.273-1.113 6.048-1.272 7.958c-0.16 1.9 0 14.5 0.8 16.873C236.002 121.4 237 122.5 237 122.477z"/></g>
<g id="humerus">
<path id="humerus" opacity="0.5" fill="#9B4F9E" enable-background="new " d="M190.635 197.309c-2.093-5.987-1.962-8.47-0.813-10.126 c1.147-1.655 0.957-1.908 3.312-2.478c2.356-0.57 3.695-1.97 5.67-1.458c1.973 0.5 3.3 0.7 5.6 3.8 c2.289 3.1 0.8 5.3 0.8 5.35s-2.737 0.059-3.824 2.86c-1.086 2.8-2.602 43.292-3.114 45.3 c-0.512 1.973-3.397 17.25-3.02 20.943c0.378 3.7 4.7 19.6 4.8 21.845c0.124 2.3 1.5 5.67-3.638 6.3 c0 0 0.7 2.516-1.503 2.243c-2.192-0.273-4.356-1.041-6.52-1.808c-2.163-0.767-7.004-0.327-6.808-3.256 c0.194-2.929-0.565-5.54 2.876-8.911c3.442-3.371 5.869-32.016 6.592-37.428S190.635 197.3 190.6 197.309z"/>
<path id="humerus" opacity="0.5" fill="#9B4F9E" enable-background="new " d="M326.388 196.912c2.059-5.999 1.914-8.481 0.758-10.129 c-1.158-1.647-0.97-1.903-3.329-2.46c-2.359-0.556-3.706-1.948-5.678-1.424c-1.97 0.524-3.307 0.724-5.577 3.8 c-2.27 3.072-0.788 5.354-0.788 5.354s2.738 0 3.8 2.838c1.102 2.8 2.9 43.3 3.4 45.2 c0.524 2 3.5 17.2 3.1 20.926c-0.356 3.697-4.573 19.58-4.686 21.873c-0.111 2.293-1.424 5.7 3.7 6.3 c0 0-0.675 2.5 1.5 2.234c2.191-0.286 4.35-1.065 6.511-1.843c2.156-0.781 7.001-0.369 6.79-3.296 c-0.213-2.927 0.533-5.542-2.929-8.895c-3.462-3.35-6.054-31.981-6.808-37.389C325.444 234.6 326.4 196.9 326.4 196.912z"/>
</svg>
Try breaking things down so you're not trying to do everything in one SVG tag. The SVG tag should basically just be your canvas to create the buttons - you can embed shapes and text within the SVG tag, with assigned IDs, to do the rest. Here's a code example and link http://www.w3.org/TR/SVG/struct.html#SVGElement:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="10cm" height="3cm" viewBox="0 0 100 30" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<desc>Example Use01 - Simple case of 'use' on a 'rect'</desc>
<defs>
<rect id="MyRect" width="60" height="10"/>
</defs>
<rect x=".1" y=".1" width="99.8" height="29.8"
fill="none" stroke="blue" stroke-width=".2" />
<use x="20" y="10" xlink:href="#MyRect" />
</svg>
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 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.
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 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'm having some trouble getting an SVG file set as a background of an element in an MVC 3 Site (Razor View Engine) and wondering if the ASP.Net Development Server (Cassini?) is properly serving the SVG file.
My SVG file is located at /img/plus.svg and here is it's contents
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="25px" height="25px" viewBox="0 0 25 25" enable-background="new 0 0 25 25" xml:space="preserve">
<polygon fill="#231F20" points="25,8.621 16.38,8.621 16.38,0 8.621,0 8.621,8.621 0,8.621 0,16.379 8.621,16.379 8.621,25
16.38,25 16.38,16.379 25,16.379 "/>
</svg>
The css rule I'm using to set the background is this:
.plusIcon { background-image: url(#Url.Content("~/img/plus.svg")); }
I've also added this to my Web.Config <system.webServer><staticContent> section:
<!-- Proper svg serving. Required for svg webfonts on iPad -->
<remove fileExtension=".svg"/>
<remove fileExtension=".svgz"/>
<mimeMap fileExtension=".svg" mimeType="images/svg+xml" />
<mimeMap fileExtension=".svgz" mimeType="images/svg+xml" />
When I navigate to the url /img/plus.svg the file is downloaded properly.
Is this just a Dev Server problem, should I try in IIS?
It turns out this is just a Cassini, ASP.Net Development Server problem. When uploaded to a proper IIS Site the SVG files are served properly.