How can I show svg files on Firefox? - flutter
I'm trying to display my logo using an svg image using Image.network(path)
It works perfectly on chrome but on a few other browsers(mainly Firefox ) the svg isn't displayed.
Edit: I tried using plugins but with my SVGs they don't work at all
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 383.3 88.7">
<defs>
<style>
.cls-1 {
fill: #E31949;
}
</style>
</defs>
<title>Artboard 1</title>
<path class="cls-1" d="M53.8,0A6.78,6.78,0,0,0,49,2.4L19.5,41.9c-1,1.3-1.8,1.1-1.8-.6V3a3.08,3.08,0,0,0-3-3H3A3.08,3.08,0,0,0,0,3V85.7a3,3,0,0,0,3,3H14.8a3,3,0,0,0,3-3V74a10.25,10.25,0,0,1,1.8-5.4l10-13.3a1.77,1.77,0,0,1,3.2.2L49.4,86.1a5.7,5.7,0,0,0,4.4,2.6H68c1.7,0,2.4-1.2,1.6-2.6l-25.1-46a5,5,0,0,1,.4-5L69.2,2.4C70.1,1.1,69.6,0,68,0Z" />
<path class="cls-1" d="M79.2,85.7a3,3,0,0,0,3,3H94a3,3,0,0,0,3-3V3a3,3,0,0,0-3-3H82.2a3,3,0,0,0-3,3Z" />
<path class="cls-1" d="M249.2,55.5c0,1.6-.7,1.8-1.5.4L216.5,2.6A6.05,6.05,0,0,0,212,0H199a3.08,3.08,0,0,0-3,3V85.7a3,3,0,0,0,3,3h11.8a3,3,0,0,0,3-3V33.3c0-1.7.7-1.8,1.5-.4l31.2,53.2a5.89,5.89,0,0,0,4.5,2.6h13a3,3,0,0,0,3-3V3a3.08,3.08,0,0,0-3-3H252.2a3.08,3.08,0,0,0-3,3Z" />
<path class="cls-1" d="M283.4,85.7a3,3,0,0,0,3,3h11.8a3,3,0,0,0,3-3V3a3.08,3.08,0,0,0-3-3H286.4a3.08,3.08,0,0,0-3,3Z" />
<path class="cls-1" d="M381.3,51.7a27.6,27.6,0,0,0-5.7-8.5,26.46,26.46,0,0,0-8.5-5.7,28.48,28.48,0,0,0-7.4-1.8,58.79,58.79,0,0,0-6-.3H342c-1.6,0-4.1-.1-5.4-.2l-1.1-.5a9.23,9.23,0,0,1-2.8-1.9,10.65,10.65,0,0,1-1.9-2.8,8.42,8.42,0,0,1-.7-3.5,8.42,8.42,0,0,1,.7-3.5,9,9,0,0,1,4.7-4.7l1.1-.5c1.3-.1,3.7-.2,5.4-.2h34.7a3.08,3.08,0,0,0,3-3V3a3.08,3.08,0,0,0-3-3H342c-1.6,0-4.3.1-6,.3a28.16,28.16,0,0,0-7.3,1.8,27,27,0,0,0-14.1,14.1,25.64,25.64,0,0,0-2.1,10.3,26.12,26.12,0,0,0,2.1,10.4,27.6,27.6,0,0,0,5.7,8.5,27.14,27.14,0,0,0,8.4,5.7,28.16,28.16,0,0,0,7.3,1.8,58.79,58.79,0,0,0,6,.3h11.8c1.6,0,4.1.1,5.4.2l1.1.5a9,9,0,0,1,4.7,4.7,9.1,9.1,0,0,1,0,7,9,9,0,0,1-4.7,4.7l-1.1.5c-1.3.1-3.7.2-5.4.2H320.4a3,3,0,0,0-3,3V85.8a3,3,0,0,0,3,3h33.4c1.6,0,4.3-.1,6-.3a29.41,29.41,0,0,0,7.4-1.8,27.6,27.6,0,0,0,8.5-5.7,27.14,27.14,0,0,0,5.7-8.4,25.64,25.64,0,0,0,2.1-10.3A32.79,32.79,0,0,0,381.3,51.7Z" />
<path class="cls-1" d="M179.5,17.6a34.89,34.89,0,0,0-5.6-7.2,38.7,38.7,0,0,0-7.2-5.6,41.06,41.06,0,0,0-6-2.8,84.65,84.65,0,0,0-5.6,8.6c-1.3,2.4-2.5,4.9-3.7,7.4.6.2,1.3.4,1.9.6l1.9.3a13.4,13.4,0,0,0,2,.1c2.9,0,4.8,3.2,6.2,5.7a10.84,10.84,0,0,1,.8,1.9,19.19,19.19,0,0,1,.6,10.4,18.62,18.62,0,1,1-32.6-15.9,19.2,19.2,0,0,1,1.4-1.5c4.7-5.2,9.8-4.2,15-2.6a52.51,52.51,0,0,1,2.3-8.4A43.9,43.9,0,0,1,154.8.4a18.48,18.48,0,0,0-2.9-.3c-1.6-.1-4.3-.2-6-.2H116.4a3,3,0,0,0-3,3V85.6a3,3,0,0,0,3,3h11.8a3.08,3.08,0,0,0,3-3V74a3,3,0,0,1,3-3l13.9-.1a5.08,5.08,0,0,1,4.2,2.7L157.7,86a5,5,0,0,0,4.2,2.8h12.9a1.84,1.84,0,0,0,1.8-2.8l-7.5-17.7a3.89,3.89,0,0,1,1.3-4.5,48.14,48.14,0,0,0,4.5-3.9,33,33,0,0,0,5.2-7.2,39.08,39.08,0,0,0,3.3-8.2,33.4,33.4,0,0,0,1.1-8.9,32.35,32.35,0,0,0-1.3-9.4A47.43,47.43,0,0,0,179.5,17.6Z" />
</svg>
Related
OpenXML stylesheet corruption
I'm getting an error on this (formatted for readability) OpenXML stylesheet at column 153, which seems to be the '.' in the 0.0% format identifier. Can anyone see what is wrong here? If I remove the numFmts then the issue goes away. <?xml version="1.0" encoding="utf-16"?> <x:styleSheet xmlns:x="http://schemas.openxmlformats.org/spreadsheetml/2006/main"> <x:numFmts count="2"> <x:numFmt /> <x:numFmt numFmtId="164" formatCode="0.0%" /> </x:numFmts> <x:fonts count="2"> <x:font> <x:sz val="11" /> <x:color rgb="000000" /> <x:name val="Calibri" /> </x:font> <x:font> <x:b /> <x:sz val="11" /> <x:color rgb="000000" /> <x:name val="Calibri" /> </x:font> </x:fonts> <x:fills count="1"> <x:fill> <x:patternFill patternType="none" /> </x:fill> </x:fills> <x:borders count="1"> <x:border> <x:left /> <x:right /> <x:top /> <x:bottom /> <x:diagonal /> </x:border> </x:borders> <x:cellXfs count="3"> <x:xf /> <x:xf fontId="1" applyFont="1" /> <x:xf numFmtId="164" applyNumberFormat="1" /> </x:cellXfs> </x:styleSheet>
It's the empty <x:numFmt> element in the line above that's the cause of the issue. The numFmtId and formatCode are required elements within that element. The schema from ECMA is: <xsd:complexType name="CT_NumFmt"> <xsd:attribute name="numFmtId" type="ST_NumFmtId" use="required"/> <xsd:attribute name="formatCode" type="s:ST_Xstring" use="required"/> </xsd:complexType> It's worth trying the OpenXml Productivity Tool in situations like these. It will validate files as well as backwards engineer code from a valid file. In your case you'd get something like this:
Adjusting hyperlinks in svg file
I am new here and facing problem while adjusting my exported svg file from Illustrator. I am trying to make it clickable (to link e-mail and Social Media Icons) but I am still not there. To linked yet. Can you please help me, to find the mistake? I know, it would be much more easier to code it by myself, although I am new and don't have enough experience for doing it. Thank you very much!
Sending the code, see mostly the end where are the slices I marked in the img in Illustrator and have to link.
Thanks a bunch!
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<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"
viewBox="0 0 850.4 566.9" style="enable-background:new 0 0 850.4 566.9;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;}
</style>
<rect id="_x3C_Slice_x3E_"><a xlink:href="https://www.xxxs.com/">x="423" y="237.9" class="st0" width="253" height="32"</a>/></rect>
<rect id="_x3C_Slice_x3E__1_"><a xlink:href="https://www.xxxx.com/">x="152" y="392.9" class="st0" width="271" height="29"</a>/></rect>
<rect id="_x3C_Slice_x3E__2_"><a xlink:href="https://www.xxxx/">x="580" y="295.9" class="st0" width="29" height="23"</a>/></rect>
<rect id="_x3C_Slice_x3E__3_"><a xlink:href="https://xxxx/">x="609" y="295.9" class="st0" width="20" height="23"</a>/></rect>
<rect id="_x3C_Slice_x3E__4_"><a xlink:href="https://xxx/">x="629" y="295.9" class="st0" width="25" height="23"</a>/></rect>
The <a> should go round the <rect> I changed the fill as well, otherwise all your rect elements are invisible.
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<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"
viewBox="0 0 850.4 566.9" style="enable-background:new 0 0 850.4 566.9;" xml:space="preserve">
<style type="text/css">
.st0{fill:blue;}
</style>
<a xlink:href="https://www.xxxs.com/"><rect id="_x3C_Slice_x3E_" x="423" y="237.9" class="st0" width="253" height="32"/></a>
<a xlink:href="https://www.xxxx.com/"><rect id="_x3C_Slice_x3E__1_" x="152" y="392.9" class="st0" width="271" height="29"/></a>
<a xlink:href="https://www.xxxx/"><rect id="_x3C_Slice_x3E__2_" x="580" y="295.9" class="st0" width="29" height="23"/></a>
<a xlink:href="https://xxxx/"><rect id="_x3C_Slice_x3E__3_" x="609" y="295.9" class="st0" width="20" height="23"/></a>
<a xlink:href="https://xxx/"><rect id="_x3C_Slice_x3E__4_" x="629" y="295.9" class="st0" width="25" height="23"/></a>
DGML - Add weight to link
How do I add weight or value to the Edges or Link in a DGML file? <?xml version='1.0' encoding='utf-8'?> <DirectedGraph xmlns="http://schemas.microsoft.com/vs/2009/dgml"> <Nodes> <Node Id="a" Label="a" Size="10" /> <Node Id="b" Background="#FF008080" Label="b" /> <Node Id="c" Label="c" Start="2010-06-10" /> </Nodes> <Links> <Link Source="a" Target="b" /> <Link Source="a" Target="c" /> </Links> <Properties> <Property Id="Background" Label="Background" DataType="Brush" /> <Property Id="Label" Label="Label" DataType="String" /> <Property Id="Size" DataType="String" /> <Property Id="Start" DataType="DateTime" /> </Properties> </DirectedGraph> I would like to be able to assign a weight or value to the lines between each node to designate the strength between the nodes.
You can add weights to each link by adding a label field with a value to each of the Link Sources. The numbers will appear beside the arrows on your graph. <Link Source="a" Target="b" Label="5" /> <Link Source="a" Target="c" Label="6" /> Additionally, the background color of each node can be changed by creating Category groups and assigning that group to each node. <Category Id="Orange" Background="Orange" /> <Category Id="Yellow" Background="Yellow" /> <Node Id="a" Category="Orange" /> <Node Id="b" Category="Yellow" />
Here's an example that uses a link Weight Style to do it: <DirectedGraph xmlns="http://schemas.microsoft.com/vs/2009/dgml"> <Nodes> <Node Id="Banana" UseManualLocation="True" /> <Node Id="Test" UseManualLocation="True" /> </Nodes> <Links> <Link Source="Test" Target="Banana" Priority="10"/> <Link Source="Test" Target="Green" /> </Links> <Properties> <Property Id="Bounds" DataType="System.Windows.Rect" /> <Property Id="UseManualLocation" DataType="System.Boolean" /> </Properties> <Styles> <Style TargetType="Link"> <Setter Property="Weight" Expression="Priority" /> </Style> </Styles> </DirectedGraph>
Hide DataPoints in chart control from WinRT XAML Toolkit
Is it possible to hide the data points in the chart control from the WinRT XAML Toolkit from CodePlex? I'm using a LineSeries and only want a line without the dots.
This seems to work. Though I am not yet sure why it makes my lines orange...
<charting:Chart
x:Name="LineChart2"
Title="Line Chart Without Data Points"
Margin="70,0">
<charting:LineSeries
Title="Population"
IndependentValueBinding="{Binding Name}"
DependentValueBinding="{Binding Value}"
IsSelectionEnabled="True">
<charting:LineSeries.DataPointStyle>
<Style
TargetType="charting:LineDataPoint">
<Setter
Property="BorderThickness"
Value="0" />
<Setter
Property="IsTabStop"
Value="False" />
<Setter
Property="Width"
Value="0" />
<Setter
Property="Height"
Value="0" />
<Setter
Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="charting:LineDataPoint">
<Grid
x:Name="Root"
Opacity="0" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</charting:LineSeries.DataPointStyle>
</charting:LineSeries>
</charting:Chart>
#Filip Skakun thanks for the very accurate answer, and about your issue regarding Orange Lines try adding this property and change the color to whatever color you want. <Charting:LineSeries.DataPointStyle> <Style TargetType="Charting:LineDataPoint"> <Setter Property="Background" Value="Red" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Charting:LineDataPoint"> <Grid x:Name="Root" Opacity="0" /> </ControlTemplate> </Setter.Value> </Setter> </Style> </Charting:LineSeries.DataPointStyle> it happens mainly because Chart's are capable of displaying multiple data series on single chart. and for Series[0] the default color is set to Orange.
SVG linearGradiend spreadMethod ignored by Safari (OSX and iOS)
Please look at the attached example.
It works fine everywhere (including Android) but in iOS 5.1.1 (both iPhone / iPad) Safari.
If you test it there you'll see that the linear gradient is not repeated at all as it appears everywhere else.
Is that a bug of ios safari or is there something wrong on my svg?
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
width="150"
height="150"
id="svg5262"
onload="anim();">
<defs
id="defs5264">
<linearGradient
x1="0"
y1="0"
x2="-8"
y2="8"
id="linearGradient5260"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(0,0)"
spreadMethod="repeat">
<stop
id="stop5216"
style="stop-color:#ff0000;stop-opacity:1"
offset="0" />
<stop
id="stop5218"
style="stop-color:#7f0000;stop-opacity:1"
offset="1" />
</linearGradient>
</defs>
<script language="javascript">
var x=0;
function anim(){
var gr = document.getElementById("linearGradient5260");
gr.setAttribute("gradientTransform", "translate(" + x + ", 0)");
x++;
if (x>15) x=0;
setTimeout(anim, 50);
}
</script>
<g
id="layer1">
<path
d="M 20,140 L 20,20 140,20"
style="fill:none;stroke:black;stroke-width:12;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
<path
d="M 20,140 L 20,20 140,20"
id="path2985"
style="fill:none;stroke:url(#linearGradient5260);stroke-width:10;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
</g>
</svg>
This is a bug. It has been confirmed to me by Apple (bug id #10171198 at http://bugreport.apple.com)
#Iviggiani It seems that the spreadMethod attribute of the linearGradient tag is being ignored on the iPad (both Safari and Chrome in my tests). Using both the SVG linearGreadient and pattern tags, I was able to create the same effect that I was getting with just the linearGradient tag, with the benefit that it works on both a windows machine and the iPad. I got the idea from this site https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Patterns
Here is an example of what I did (jsFiddle here: http://jsfiddle.net/wahoodoss/eG5Tx/):
<!DOCTYPE html>
<html>
<body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<svg id="abc" width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<linearGradient id="Gradient1">
x1="0%" y1="0%" x2="0%" y2="100%"
<stop offset="40%" stop-color="white" stop-opacity="1"/>
<stop offset="100%" stop-color="#00AA00" stop-opacity="1"/>
</linearGradient>
<pattern id="Pattern" x="0" y="0" width="5" height="5"
patternTransform="rotate(90 0 0)" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="5" height="5" fill="url(#Gradient1)"/>
</pattern>
</defs>
</svg>
<script>
var arc = d3.svg.arc()
.innerRadius(40).outerRadius(100)
.startAngle(20 * 3.141 / 180)
.endAngle(120 * 3.141 / 180);
var chart = d3.select("#abc")
.attr("class", "chart")
.attr("width", 420)
.attr("height", 420);
chart.append("svg:rect")
.style("fill","url(#Pattern)")
.style("stroke", "black")
.attr("x", 20).attr("y",20).attr("width",120).attr("height",120);
</script>
</body>
</html>