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?
Related
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>
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>
I have a repeater control in an AIR application, that gets data dynamically. The repeater is inside a panel:
<s:Panel top="50" bottom="10" left="10" right="10">
<mx:VBox>
<mx:Repeater id="FeedItemsRptr" dataProvider="{Story_Collection}" height="300">
<s:Label text="{FeedItemsRptr.currentItem.storyTitle}" />
<s:RichText text="{FeedItemsRptr.currentItem.storyDesc}" />
<mx:HRule width="100%"/>
</mx:Repeater>
</mx:VBox>
</s:Panel>
However, when the data is bound to the control, the repeater text flows out of the panel container instead of getting scrollbars.
I have tried to encapsulate the repeater inside an to the same effect, while is even more unpredictable.
Any idea on how to tame the repeater?
http://i.stack.imgur.com/WFspk.png
you can find more on what I wanted to do by going to : http://aphatak.blogspot.com/2010/11/and-take-that-too-times-of-india.html
I have kept some screenshots, flash builder source and compiled bin there; thanks for your help!
A solution that seems to be working is wrapping up the VBox in a spark:Scroller component like below:
<s:Panel width="100%" height="100%" top="50" bottom="10"
left="10" right="10" title="{FeedItemsRptrCont.height}">
<s:Scroller width="100%" height="100%">
<s:Group width="100%" height="100%">
<mx:VBox id="FeedItemsRptrCont" width="100%" height="100%">
<mx:Repeater id="FeedItemsRptr" width="100%" height="100%" dataProvider="{Story_Collection}">
<s:Label text="{FeedItemsRptr.currentItem.storyTitle}" />
<s:RichText text="{FeedItemsRptr.currentItem.storyDesc}" />
<mx:HRule width="100%" />
</mx:Repeater>
</mx:VBox>
</s:Group>
</s:Scroller>
</s:Panel>
However, what you want to be doing seem to be something that a spark:List would do better than a repeater.