I was able to successfully implement the Mapael map into my HTML page, and was able to configure the hover fill color to my liking via the JavaScript code.
I'm trying to change the fill color of specific individual countries.
I've worked briefly with SVGs before, and I used to open up a file with a text editor and update certain elements that way. Is there a different way to do this?
I was wondering if this is possible with Mapael?
and Where does one grab the SVG file from?
I downloaded and deploy the repository version (jQuery-Mapael-2.2.0).
See screenshot of the files and folders.
svg code file
You have to use Mapael special function/params:
$(function () {
$("yourMapElementSelector").mapael({
// Customize some areas of the map
areas: {
"US": {
attrs: {
fill: "#488402"
}
, attrsHover: {
fill: "#a4e100"
}
}
},
});
});
I am not sure how Mapael works, but normally what I would do with the SVG is add IDs to each country, something like:
<g id="france">
or
<path id="france">
Or whatever shapes you use and then just define a CSS class similar to this:
/* if the paths are inside a group */
.svgactive path {
fill: red;
}
/* if the paths are standalone */
path.svgactive {
fill: red;
}
And just toggle the class .svgactive on your specific id inside the SVG file.
I am using Infragistics igxGridComponent. I am trying to style the look of selected rows.
I have tried setting my own css classes:
.selected-row {
background-clor:red;
color:white;
font:bold;
}
However, I am not really sure how to apply them conditionally. Should I be using ngClass or there is another syntax to this?
You can use the igx-grid-theme SASS function to create a custom theme:
$custom-theme: igx-grid-theme(
$row-selected-background: green,
$row-selected-text-color: #000,
$row-selected-hover-background: red
);
And then pass it to the igx-grid SASS mixin:
::ng-deep {
#include igx-grid($custom-theme);
}
Here you can find an example.
Mixin using color variable or hex color code does not work, but works with color constant
Tried in React with webpack dev server and babel, also in codepen https://codepen.io/wfpjwporefow/pen/bGbPoEL
#mixin telegram-mixin($color) {
background-image: url('data:image/svg+xml;utf8,<svg fill="#{$color}" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><path d="M18.384,22.779c0.322,0.228 0.737,0.285 1.107,0.145c0.37,-0.141 0.642,-0.457 0.724,-0.84c0.869,-4.084 2.977,-14.421 3.768,-18.136c0.06,-0.28 -0.04,-0.571 -0.26,-0.758c-0.22,-0.187 -0.525,-0.241 -0.797,-0.14c-4.193,1.552 -17.106,6.397 -22.384,8.35c-0.335,0.124 -0.553,0.446 -0.542,0.799c0.012,0.354 0.25,0.661 0.593,0.764c2.367,0.708 5.474,1.693 5.474,1.693c0,0 1.452,4.385 2.209,6.615c0.095,0.28 0.314,0.5 0.603,0.576c0.288,0.075 0.596,-0.004 0.811,-0.207c1.216,-1.148 3.096,-2.923 3.096,-2.923c0,0 3.572,2.619 5.598,4.062Zm-11.01,-8.677l1.679,5.538l0.373,-3.507c0,0 6.487,-5.851 10.185,-9.186c0.108,-0.098 0.123,-0.262 0.033,-0.377c-0.089,-0.115 -0.253,-0.142 -0.376,-0.064c-4.286,2.737 -11.894,7.596 -11.894,7.596Z"/></svg>');
}
$light-highlight: #283044;
// works
.icon {
#include telegram-mixin(red);
}
// does not work
.icon {
#include telegram-mixin($light-highlight);
}
// does not work
.icon {
#include telegram-mixin(#ffffff);
}
I want to use a mixin to set a svg background in a specific color. Only works with color constants like red, blue, black, ...
I do not get any error messages, my linter is happy, the svg is just not visible.
Your hash needs to be encoded, like this:
.icon {
#include telegram-mixin("%23ffffff");
}
That said, you should encode the entire thing. Not all browsers can read unencoded inline data URI, so encoding it will ensure cross-browser compatibility. Here's a site that'll encode:
https://yoksel.github.io/url-encoder/
You can also encode via Sass functions. Here's an example: https://codepen.io/sodapop/pen/PKMwyN
Is it possible to add a before element in CSS like this:
ul {
li:before {
content: url('../icons/fancy-symbol.svg');
}
}
and have access to the svg's objects (e.g. a specific line or rectangle) and properties (e.g. the stroke-width, strike and fill color)?
Or is there a workaround for these kind of situations?
The use case is to color some lines on hover and animate the svg on click.
You can specify a fragment on the SVG URL, like ../icons/fancy-symbol.svg#red, then have CSS inside the file react to that:
<style>
#red:target ~ .some-element-here {
fill: red;
}
</style>
This won't let you specify properties dynamically, but it can be useful for interaction states, especially with a preprocessor.
Alternatively, if the SVG file is small enough, you can use preprocessors to change properties in a Data URI, like with sass-svg, or manually:
.li:before {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'
fill='#{$color}'%3E...");
}
(By the way, it might be easier to use ul { list-style-image: url(...) } instead of pseudo-elements.)
The Susy grid has a $from-direction variable, but I can't use it like so:
[dir="rtl"] {$from-direction: right;}
The generated CSS changes all direction related Susy CSS to right-to-left and is not prepended with [dir="rtl"].
What am I doing wrong?
Unfortunately there is no way for Sass (or Susy) to know anything about your HTML. Because things are pre-compiled, you have to nest the actual styles inside your switch, not just the variable setting. That probably means two different compiled stylesheets, which you can do easily in Sass, using that setting.
You'll need two scss files, e.g. rtl.scss and ltr.scss. Each one starts with that variable, and then imports all the necessary partials for your site:
// rtl.scss
$from-direction: right;
#import "my-site-partials.scss";
and
// ltr.scss
$from-direction: left;
#import "my-site-partials.scss";
Then you just need to load the correct css output file in your HTML depending on the direction. You can also do it in a single file, but you'll be loading twice the code you use in either case, and nesting all your styles an extra level. I recommend the two-file approach.
UPDATE: A Single-file approach.
You can use the same technique in a single file, but it will require an extra wrapper around all your styles. Something like this:
#each $dir in ltr, rtl {
$from-direction: if(ltr, left, right);
[dir="#{$dir}"] {
// your styles
}
}
You could make that into a mixin:
#mixin bi {
#each $dir in ltr, rtl {
$from-direction: if(ltr, left, right);
[dir="#{$dir}"] {
#content;
}
}
}
#include bi {
// your styles
}
Or you could override only specific styles that change with direction:
#mixin rtl {
$from-direction: right;
[dir="rtl"] {
#content;
}
$from-direction: left;
}
// your ltr styles
#include rtl {
// your rtl overrides
}
There are many other variations on that, and features you could add for flexibility. But this should get you started.