SVG linearGradient not rendering in iOS Ionic/Angular app - ios

I have the following svg:
<svg
class="cu-onboarding__login-container-gradient-object-bottom"
width="800"
height="314"
viewBox="0 0 375 314"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M59.1055 231.889C92.1114 207.309 133.608 198.845 172.433 186.598C197.996 178.534 219.893 164.86 243.453 152.356C303.352 120.566 376.181 98.9861 424.044 150.47C463.933 193.376 471.775 279.363 427.797 333.873C412.585 352.726 393.211 363.569 372.415 370.098C359.93 374.019 344.434 375.011 333.956 385.621C322.908 396.813 319.771 415.91 315.573 430.508C309.332 452.239 302.685 475.063 289.413 493.687C258.966 536.419 222.943 523.336 192.068 489.499C177.06 473.049 164.539 454.553 150.567 437.257C130.752 412.728 106.278 399.301 78.8891 384.535C54.4984 371.386 29.5248 354.466 20.3018 328.335C9.83631 298.685 23.4443 264.712 46.095 242.903C50.2548 238.898 54.6005 235.244 59.1055 231.889Z"
fill="url(#paint2_linear)"
/>
<defs>
<linearGradient
id="paint2_linear"
x1="225.411"
y1="-47.5534"
x2="-120.158"
y2="88.7281"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#FFBB11" />
<stop offset="1" stop-color="#FF3FA8" />
</linearGradient>
</defs>
</svg>
This renders fine in Chrome, Safari, and Android, but in iOS (built with ionic), it doesn't render. It's just blank.
If i change fill="url(#paint2_linear)" to fill="red", it renders it as a red object.
What is going on? What is wrong with my linearGradient?

the <base href="/"> tag in my index.html was messing things up. I removed it and it worked.

Related

How to vertically align the content in Vuetify version 1.5

I am trying to make cards on the screen and I want to add a title and icon for that card that title and icon I want to align vertically center of the card. I am trying everything but still is not working
This is my main component
<v-container fluid>
<v-layout row wrap align-center justify-center fill-height>
<v-flex xs12 sm6 md4 lg4>
<v-hover v-slot="{ hover }">
<v-card
:elevation="hover ? 12 : 2"
:class="{ 'on-hover': hover }"
class="primary ma-4 white--text"
height="300"
>
<FirstTile></FirstTile>
</v-card>
</v-hover>
</v-flex>
</v-layout>
<v-container>
This is my FirstTile tag code
<v-flex xs12>
<v-layout align-center justify-center fill-height>
<v-card-title primary-title id="heading">
Profit/Loss
</v-card-title>
</v-layout>
<v-layout align-center justify-center fill-height>
<v-card-action>
<v-icon
x-large
color="white"
> swap_vert
</v-icon>
</v-card-action>
</v-layout>
</v-flex>
Your FirstTile html could be something like this. align-center will fill the space vertically.
<v-container bg fill-height grid-list-md text-xs-center>
<v-layout row wrap align-center>
<v-flex>
<v-card-text >Profit/loss </v-card-text>
<v-icon
x-large
color="white"
> swap_vert
</v-icon>
</v-flex>
</v-layout>
</v-container>

Print large SVG chart on separate pages

I am trying to print a large SVG chart from a browser, the SVG chart is embedded into the HTML. The width / height of the chart is set to absolute. The print only prints a part of the SVG chart, however much will fit on 1 page, and cuts the rest off. Is there a way to split up the chart to print into separate pages?
This totally depends on what browser you are using to view the SVG. Either try a different browser... Safari has GREAT printing capabilities (on the Mac at least).. or... "isolate" the SVG.. Either look at the source and figure out the relative URL to the embedded SVG and enter it into the URL bar..
<td><object id="object" type="image/svg+xml" data="**smiley.svg**">Please use a modern browser!</object></td>
<td><iframe id="iframe" src="**smiley.svg**">Please use a modern browser!</iframe></td>
<td><embed id="embed" src="**smiley.svg**" type="image/svg+xml" /></td>
<td><img id="img" alt="smiley face" src="**smiley.svg**" /></td>
or Copy and paste the actual SVG code from the inline source and paste it into a plain text document with the .svg extension...
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice"
style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;">
<linearGradient id="gradient">
<stop class="begin" offset="0%"/>
<stop class="end" offset="100%"/>
</linearGradient>
<rect x="0" y="0" width="100" height="100" style="fill:url(#gradient)" />
<circle cx="50" cy="50" r="30" style="fill:url(#gradient)" />
</svg>
Then you can use a multitude of applications, from Illustrator, to the free Inkscape, or MANY, many others to manipulate (or print) it to your hearts content.
Use phantomjs.org project to generate your chart images at server.
It allows to load any HTML page by URL into headless WebKit machine and render it into PNG.
Plus, you can get final size of your page and then cut it into peaces via defining Clip Region in cycle.
For example next sample exports several charts from the page into separate PNG images in file system. After that you can assemble your new web page or pack them into PDF and provide download link to your user. This would be the most reliable and stable printing solution for web application.
var page = require('webpage').create();
page.viewportSize = { width: 1280, height : 1024 };
page.open('http://chart.html', function () {
page.clipRect = page.evaluate(function () {
var chart = jQuery("#chart1");
return { top: chart.offset().top, left: chart.offset().left, width: chart.outerWidth(), height: chart.outerHeight() };
});
page.render('chart1.png');
page.clipRect = page.evaluate(function () {
var chart = jQuery("#chart2");
return { top: chart.offset().top, left: chart.offset().left, width: chart.outerWidth(), height: chart.outerHeight() };
});
page.render('chart2.png');
page.clipRect = page.evaluate(function () {
var chart = jQuery("#chart3");
return { top: chart.offset().top, left: chart.offset().left, width: chart.outerWidth(), height: chart.outerHeight() };
});
page.render('chart3.png');
phantom.exit();
});

Moving a toolbar button in XUL

I'm trying to get an element to move from right to left in XUL. I am doing this with a toolbar and want one toolbarbutton w/ a label to remain anchored to the right, while one of them moves from right to left, starting to the left of the anchor.
I'm trying to achieve this effect by modifying marginLeft, but my element stays still. I'm not really sure why it does not move.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE overlay >
<overlay id="my-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/x-javascript">
// Install load handler
var marginLeft = 0;
window.addEventListener("load", function(e) {
function moveIt() {
document.getElementById("moveit").style.marginLeft = marginLeft + "px";
marginLeft -= 30;
}
setInterval(moveIt, 1000);
}, false);
</script>
<vbox id="browser-bottombox">
<toolbar id="theToolbar">
<!-- holds the scrolling items and the refresh time -->
<hbox id="scrollingItemContainer" flex="1" align="end">
<!-- container for our scrolling items -->
<spacer flex="1"/>
<hbox id="movingItems" align="end">
<toolbarbutton id="moveit" label="moving"/>
</hbox>
<hbox>
<toolbarbutton id="rightAnchor" label="right"/>
</hbox>
</hbox>
</toolbar>
</vbox>
</overlay>
Any help you can provide will be helpful. I've tried this on FF4, but I think the problem exists on FF3 as well.
I should note that if I add a spacer with flex=1 after scrollingItemContainer then I see the item move, but it is not anchored to the right.

TemplateBinding for Dynamic Controls

I create a templated RadioButton at run time. After initializing the templated RadioButton, I set the DataContext and Tag property and then add this button in a StackPanel. The problem is that the template binding does not work. below is the XAML and the code behind. All this work if I assign values to these properties in XAML. Any ideas?
Code:
TemplatedRadioButton commandButton = new TemplatedRadioButton();
commandButton.DataContext = "bla"; // Some txt that I will.
commandButton.Tag = MyImage; // This is the ImageIcon that I create at run time too.
MyStackPanel.Children.Add(commandButton);
XAML:
Sorry:
Code:
TemplatedRadioButton commandButton = new TemplatedRadioButton();
commandButton.DataContext = "bla"; // Some txt that I will.
commandButton.Tag = MyImage; // This is the ImageIcon that I create at run time too.
MyStackPanel.Children.Add(commandButton);
XAML:
<Grid Margin="0 8 0 1">
<Grid.RowDefinitions>
<RowDefinition Height="4*"/>
<RowDefinition Name="textheight" Height="2*"/>
</Grid.RowDefinitions>
<ContentPresenter x:Name="Content" ContentSource="Tag" Margin=" 4 4 6 6" HorizontalAlignment="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<TextBlock Name="caption" Text="{TemplateBinding DataContext}" FontSize="11" FontFamily="/Fonts/#Lucida Grande" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Bottom" Foreground="#FF313131" Margin="0 2 0 6"/>
</Grid>
</Border>

Databinding WPF Rectangle gradient fill

I'm attempting to databind a gradient brush as a Rectangle fill. What do I need to do to get the commented-out binding to work? StartColor and EndColor are declared as System.Drawing.Color.
<Rectangle Width="100" Height="20">
<Rectangle.Fill>
<LinearGradientBrush>
<GradientStop Offset="0" Color="Pink"/>
<GradientStop Offset="1" Color="Red"/>
<!--<GradientStop Offset="0" Color="{Binding Path=StartColor}"/>-->
<!--<GradientStop Offset="1" Color="{Binding Path=EndColor}" />-->
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
The problem was using System.Drawing.Color rather than the proper System.Windows.Media.Color

Resources