I want to fill my line graph with a gradient, I use this configuration, but with the option styledMode= true it does not work. I am using Hightcharts 9.0
https://jsfiddle.net/yjqcz42n/92/
As you can read in the docs:
When the chart.styledMode option is true, no presentational attributes (like fill, stroke, font styles etc.) are applied to the chart SVG. Instead, the design is applied purely by CSS.
It means you need to style series using their CSS classes.
Recommended solution:
Due to the difficulty of styling gradients for the SVGs, there is a Highcharts guide doc, on how to configure Gradients, shadows, and pattern fills in styled mode
https://www.highcharts.com/docs/chart-design-and-style/gradients-shadows-and-patterns#gradients-shadows-and-pattern-fills-in-styled-mode
Alternative solution:
HTML
<svg width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg">
<style type="text/css">
rect{fill:url(#MyGradient)}
</style>
<defs>
<linearGradient id="MyGradient">
<stop offset="5%" stop-color="#F60" />
<stop offset="95%" stop-color="#FF6" />
</linearGradient>
</defs>
</svg>
CSS:
.highcharts-series-0 {
fill: url(#MyGradient);
stroke: url(#MyGradient);
}
Demo:
https://jsfiddle.net/BlackLabel/15rmcfyd/
We are implementing icons in our Ionic / Cordova app that uses SVG icons and whenever exported from Adobe XD, and implemented in the iOS version of the app, the gradient part of the icon shows correctly on Web (Chromium based browsers like Edge / Chrome) and Android but not on iOS.
This is how the icon looks normally in Chrome/Edge/Android and in XD:
And this what the icon looks like once in Cordova - iOS:
As you can see, the dot on the icon that has normally a gradient appears black. We cannot figure out why.
Here is the code of the SVG that Adobe XD produces:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"><defs><style>.a{fill:#fff;opacity:0;}.b{fill:none;stroke:#5d5d5d;stroke-linecap:round;stroke-width:1.5px;}.b,.c{stroke-miterlimit:10;}.c{stroke:#fff;fill:url(#a);}</style><linearGradient id="a" y1="0.5" x2="1" y2="0.5" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="#d9315d"/><stop offset="1" stop-color="#dc2224"/></linearGradient></defs><g transform="translate(0 0)"><rect class="a" width="24" height="24"/><g transform="translate(-1047.065 -371.769)"><path class="b" d="M1057.747,389.029v-4.016a3.157,3.157,0,0,0-.211-1.137l-.07-.183a2.228,2.228,0,0,0-.4-.662l-.8-.921-.566-.653-4.345-5.017a.224.224,0,0,1,.169-.37h18.052a.223.223,0,0,1,.169.37l-4.923,5.685-.658.76a3.359,3.359,0,0,0-.552.883h0a3.179,3.179,0,0,0-.253,1.243v9.081a.224.224,0,0,1-.355.182l-2.889-2.074" transform="translate(-1.701 -1.801)"/><circle class="c" cx="4.593" cy="4.593" r="4.593" transform="translate(1047.565 372.269)"/></g></g></svg>
Because we thought maybe Adobe XD produces some non compliant code of some sort, we decided to just put it through some SVG sanitizer like this one: http://svg.enshrined.co.uk/ , producing the following code:
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
<defs>
<style>.a{fill:#fff;opacity:0;}.b{fill:none;stroke:#5d5d5d;stroke-linecap:round;stroke-width:1.5px;}.b,.c{stroke-miterlimit:10;}.c{stroke:#fff;fill:url(#a);}</style>
<linearGradient id="a" y1="0.5" x2="1" y2="0.5" gradientUnits="objectBoundingBox">
<stop offset="0" stop-color="#d9315d"></stop>
<stop offset="1" stop-color="#dc2224"></stop>
</linearGradient>
</defs>
<g transform="translate(0 0)">
<rect class="a" width="24" height="24"></rect>
<g transform="translate(-1047.065 -371.769)">
<path class="b" d="M1057.747,389.029v-4.016a3.157,3.157,0,0,0-.211-1.137l-.07-.183a2.228,2.228,0,0,0-.4-.662l-.8-.921-.566-.653-4.345-5.017a.224.224,0,0,1,.169-.37h18.052a.223.223,0,0,1,.169.37l-4.923,5.685-.658.76a3.359,3.359,0,0,0-.552.883h0a3.179,3.179,0,0,0-.253,1.243v9.081a.224.224,0,0,1-.355.182l-2.889-2.074" transform="translate(-1.701 -1.801)"></path>
<circle class="c" cx="4.593" cy="4.593" r="4.593" transform="translate(1047.565 372.269)"></circle>
</g>
</g>
</svg>
Which at first look does some cleaner, but still does not fix our issue.
Most of the icons we use have this gradient in some form or another. And we have other examples of these icons unable to use the gradient in Cordova - iOS version.
So rendering SVG likely has less to do with Cordova, but with specific browser ability to handle SVG.
In your case it seems like you apply "gradient" using url(...) reference within css.
Safari introduced a requirement for the url in this case to feature "absolute" path.
Try the same icon but change the way you refer url from:
fill:url(#a)
to:
fill:url(https://yourwebsite.com/yourpage/#a)
Basically you need something like this for Safari:
fill: url( {{ location.href }}#filterOrGradientId )
It is a pain to work around this issue. So one suggestion could be also to try referring the gradient using fill attribute on the svg circle element.
Example from MDN:
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="myGradient" gradientTransform="rotate(90)">
<stop offset="5%" stop-color="gold" />
<stop offset="95%" stop-color="red" />
</linearGradient>
</defs>
<!-- using my linear gradient -->
<circle cx="5" cy="5" r="4" fill="url('#myGradient')" />
</svg>
I've a problem with custom font icons generated from svg using fontello. On PC, icons works fine, but on iOS browsers I haven't transparency. All source svg contains fill-rule: evenodd.
I can't find solution for my problem, if You know how solve this issue, please help.
On PC custom fontello icons works fine, but on iOS I've a problem. I'm not sure if the Android works well, but iOS has a higher priority.
<svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72">
<defs>
<style>
.cls-1 {
fill-rule: evenodd;
}
</style>
</defs>
<path class="cls-1" d="M0,20V33l2,5,2,4,4,4,3,3,6,3,3,1H33l3-1,6-3,1-2h2v1l1,4L66,72h1l5-5V66L52,46l-2-1-2-1V43l2-3,1-1,1-3,1-3V20l-2-5-2-4L45,7,40,3,38,2,33,0H20L15,2,10,5,7,8,5,10,3,13,1,17Zm16-9-3,3-3,4L9,21,8,27l1,6,2,4,4,4,3,2,2,1,5,1h4l4-1,4-2,4-3,2-4,2-6V25l-1-5-1-2-2-3-3-3-3-2L28,8,21,9l-3,1Z"/>
</svg>
Effect on Desktop (ok): https://ibb.co/9pfZFnf
Effect on iOS (not ok): https://ibb.co/Y846vb0
Apparently it didn't get the css rules. Please try to use the css like this, although I'm not very sure this will work.
<style type="text/css">
<![CDATA[
.cls-1 {
fill-rule: evenodd;
}
]]>
</style>
Alternatively you can reverse the second part of the d attribute (the hole) so that you don't need to use the fill-rule: evenodd;
<svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72">
<path class="cls-1" d="M0,20V33l2,5,2,4,4,4,3,3,6,3,3,1H33l3-1,6-3,1-2h2v1l1,4L66,72h1l5-5V66L52,46l-2-1-2-1V43l2-3,1-1,1-3,1-3V20l-2-5-2-4L45,7,40,3,38,2,33,0H20L15,2,10,5,7,8,5,10,3,13,1,17Z
M18,10L21,9L28,8L35,10L38,12L41,15L43,18L44,20L45,25L45,29L43,35L41,39L37,42L33,44L29,45L25,45L20,44L18,43L15,41L11,37L9,33L8,27L9,21L10,18L13,14L16,11z"/>
</svg>
I have an image (in jpg and svg format) that I'd like to generate a pattern I can use as a fill for an SVG image I am working on. Is there any tool or technique to accomplish this?
Sure just put the image (jpg or svg) in a pattern.
<defs>
<pattern id="image1" width="100%" height="100%">
<image xlink:href="image.jpg" width="100" height="100" />
</pattern>
</defs>
Then you can use it as a fill attribute like this: fill="url(#image1)" />
I am trying to align a ui-icon from a jquery theme to the right of a textbox element with no luck.
I've tried different floats (floating left pushes it to the left side of my textbox, floating right pushes it all the way to the end of my parent element so it doesn't sit snug next to my textbox), I've tried display:inline, I've tried display:inline-block...nothing seems to work.
Shouldn't a span just render the html inline anyway, right where I put it on the page?
<td><input type="text" maxlength="4" name="tb" id="tb" style="width:30px;" /><span class="ui-icon ui-icon-help ui-state-default" id="tbHelp" style="inline-block;" title="What's This?"></span></td>
You could assign class or id to the td and assign width to this element. This width should be assigned taking in mind the icon size. Then proceed with float right. Span elements are used for text so why don't you use image tag for this icon?
<head>
<style type="text/css">
.tdd{
width: 50px;
height: 20px;
background-color: blue;
}
</style>
</head>
<body>
<table>
<td class="tdd"><input type="text" maxlength="4" name="tb" id="tb" style="width:30px;" /><img src="img/bgFlag.png" width="16" height="16" class="ui" id="tbHelp" style="inline-block;" title="What's This?"></td>
</table>