SVG linearGradiend spreadMethod ignored by Safari (OSX and iOS) - ios5
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>
Related
Figma SVG not rendering with package flutter_svg
I'm exporting svg file from figma, flutter have errors: Failed to find definition for url(#pattern0) Failed to find definition for url(#pattern1) Full text of error: The following assertion was thrown while parsing AssetBundlePictureKey(bundle: PlatformAssetBundle#41f97(), name: "assets/images/select-image.svg", colorFilter: null, theme: SvgTheme(currentColor: Color(0xff000000), fontSize: 14.0, xHeight: 7.0)) in _getDefinitionPaint: Failed to find definition for url(#pattern1) This library only supports and xlink:href references that are defined ahead of their references. This error can be caused when the desired definition is defined after the element referring to it (e.g. at the end of the file), or defined in another file. This error is treated as non-fatal, but your SVG file will likely not render as intended My svg filу <svg width="26" height="27" viewBox="0 0 26 27" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <image id="image0_133_96" width="100" height="100" xlink:href="data:image/png;base64,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"/> <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1"> <use xlink:href="#image0_133_96" transform="translate(-0.0142405) scale(0.0102848 0.01)"/> </pattern> <pattern id="pattern1" patternContentUnits="objectBoundingBox" width="1" height="1"> <use xlink:href="#image0_133_96" transform="translate(-0.0142405) scale(0.0102848 0.01)"/> </pattern> </defs> <mask id="mask0_133_96" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="26" height="27"> <rect y="0.333344" width="25.28" height="26" fill="url(#pattern0)"/> </mask> <g mask="url(#mask0_133_96)"> <rect y="0.333344" width="25.28" height="26" fill="url(#pattern1)"/> <rect y="0.333344" width="25.28" height="26" fill="#9A9EAA"/> </g> Where is my error?
I solved my problem, I converted image from figma to png to svg
How can I show svg files on Firefox?
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>
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>
Change Jenkins text "build" to "Linux Build" or "Mac Build"
Can we be more precise of target build? I would like to know if we can customize a build type text of Jenkins. Most of the project have a table format instead .svg source <?xml version="1.0"?> <svg xmlns="http://www.w3.org/2000/svg" width="90" height="20"> <linearGradient id="a" x2="0" y2="100%"> <stop offset="0" stop-color="#bbb" stop-opacity=".1"/> <stop offset="1" stop-opacity=".1"/> </linearGradient> <rect rx="3" width="90" height="20" fill="#555"/> <rect rx="3" x="37" width="53" height="20" fill="#4c1"/> <path fill="#4c1" d="M37 0h4v20h-4z"/> <rect rx="3" width="90" height="20" fill="url(#a)"/> <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11"> <text x="19.5" y="15" fill="#010101" fill-opacity=".3">build</text> <text x="19.5" y="14">build</text> <text x="62.5" y="15" fill="#010101" fill-opacity=".3">passing</text> <text x="62.5" y="14">passing</text> </g> </svg>
WPF/C#: 'Slide to Unlock' feature from iPhone
I just want to ask for your opinion on how to achieve the 'Slide to Unlock' feature from iPhone using Windows Presentation Foundation. I already came across to this article: iPhone slide to unlock progress bar (part 1), and wondering if you can give me some other resources for a good head start. Thank you.
I would retemplate a Slider, as this is the closest control, functionality-wise.
You should catch the event of Value_Changed, and if Value == Maximum then the slider is "opened".
Retemplating the control would make it look like your "unlock control" with ease. I'll paste later an example.
-- EDIT --
Have free time at work, so I started it for you.
The usage is as follows:
<Grid x:Name="LayoutRoot">
<Slider Margin="185,193,145,199" Style="{DynamicResource SliderStyle1}"/>
</Grid>
and the ResourceDictionary:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
<LinearGradientBrush x:Key="MouseOverBrush" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFF" Offset="0.0"/>
<GradientStop Color="#AAA" Offset="1.0"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="LightBrush" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFF" Offset="0.0"/>
<GradientStop Color="#EEE" Offset="1.0"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="NormalBorderBrush" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#CCC" Offset="0.0"/>
<GradientStop Color="#444" Offset="1.0"/>
</LinearGradientBrush>
<Style x:Key="SimpleScrollRepeatButtonStyle" d:IsControlPart="True" TargetType="{x:Type RepeatButton}">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Focusable" Value="false"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Grid>
<Rectangle Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{TemplateBinding BorderThickness}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ThumbStyle1" d:IsControlPart="True" TargetType="{x:Type Thumb}">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Grid Width="54">
<Ellipse x:Name="Ellipse" />
<Border CornerRadius="10" >
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFBFBFB" Offset="0.075"/>
<GradientStop Color="Gainsboro" Offset="0.491"/>
<GradientStop Color="#FFCECECE" Offset="0.509"/>
<GradientStop Color="#FFA6A6A6" Offset="0.943"/>
</LinearGradientBrush>
</Border.Background>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Fill" Value="{StaticResource MouseOverBrush}" TargetName="Ellipse"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Fill" Value="{StaticResource DisabledBackgroundBrush}" TargetName="Ellipse"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="SliderStyle1" TargetType="{x:Type Slider}">
<Setter Property="Background" Value="{StaticResource LightBrush}"/>
<Setter Property="BorderBrush" Value="{StaticResource NormalBorderBrush}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Slider}">
<Border CornerRadius="14" Padding="4">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF252525" Offset="0"/>
<GradientStop Color="#FF5C5C5C" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<Grid x:Name="GridRoot">
<TextBlock Text="Slide to unlock" HorizontalAlignment="Center" VerticalAlignment="Center" />
<!-- TickBar shows the ticks for Slider -->
<!-- The Track lays out the repeat buttons and thumb -->
<Track x:Name="PART_Track" Height="Auto">
<Track.Thumb>
<Thumb Style="{StaticResource ThumbStyle1}"/>
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton Style="{StaticResource SimpleScrollRepeatButtonStyle}" Command="Slider.IncreaseLarge" Background="Transparent"/>
</Track.IncreaseRepeatButton>
<Track.DecreaseRepeatButton>
<RepeatButton Style="{StaticResource SimpleScrollRepeatButtonStyle}" Command="Slider.DecreaseLarge" d:IsHidden="True"/>
</Track.DecreaseRepeatButton>
</Track>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="TickPlacement" Value="TopLeft"/>
<Trigger Property="TickPlacement" Value="BottomRight"/>
<Trigger Property="TickPlacement" Value="Both"/>
<Trigger Property="IsEnabled" Value="false"/>
<!-- Use a rotation to create a Vertical Slider form the default Horizontal -->
<Trigger Property="Orientation" Value="Vertical">
<Setter Property="LayoutTransform" TargetName="GridRoot">
<Setter.Value>
<RotateTransform Angle="-90"/>
</Setter.Value>
</Setter>
<!-- Track rotates itself based on orientation so need to force it back -->
<Setter TargetName="PART_Track" Property="Orientation" Value="Horizontal"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
Note that this is a very good start, but it's not everything.
I would also define a custom control that derives from slider and that uses this style automatically. Also I would expose a SlideUnlocked event when the user slides all the way right.
To finish it all i would also add an animation that moves the Thumb back left in case the user has dragged it right, but not all the way (to imitate iPhone's UX exactly.)
Good luck, and ask away if you don't know how to implement any of the stages i suggested.
WPF slider has got one "-" and it is value ,
always when you move it, value is for example in decimal 1,122213174 so one "-".
But another way to create slider is in Windows forms.
Create trackBar1 ,and maximum = 100 points.
This is for Windows forms application:
On trackBar1_mouse_up:
if(trackBar1.Value < 100)
{
//Animation - slide back dynamicaly.
for(int i=0;i<=trackBar1.Value;i++){
int secondVal=trackBar1.Value-i;
trackBar1.Value=secondVal;
System.Threading.Thread.Sleep(15);
}
}
if(trackBar1.Value==100)
{
//sets enabled to false, then after load cannot move it.
trackBar1.Enabled=false;
MessageBox.Show("Done!");
}
And this for WPF Slider: (on PreviewMouseUp)
if (Convert.ToInt16(slider1.Value) < 99)
{
//Animation - slide back dynamicaly.
for (int i = 0; i < Convert.ToInt16(slider1.Value); i++)
{
int secondVal = Convert.ToInt32(slider1.Value) - i;
slider1.Value = secondVal;
System.Threading.Thread.Sleep(10);
if (secondVal < 2)
{
slider1.Value = 0;
}
}
}
if (Convert.ToInt16(slider1.Value) > 99)
{
//sets enabled to false, then after load cannot move it.
slider1.IsEnabled = false;
slider1.Value = 100;
MessageBox.Show("Done!");
}
Good luck! I hope it helps, try it with slider, but I think application will crash.