If I want style sheets for different color themes, how can I keep canvas font and line colors in an external CSS file?
I could make hidden dom elements and use them as varaibles.
I could just use javascript to read the current theme and set the colors using javascript variables but then it defeats the purpose of css files. I also want someone else to edit the styles and colors without having to do javascript.
Is there no way to store a setting in a css file and easily read it with javascript (no ajax or jquery)?
The line color, etc. in a canvas element are not affected by CSS, so there is no way to directly do this. The best you can do is use a data file of some sort that stores an object in JSON format containing appropriate canvas variable values for each theme.
Canvas drawing is independent of CSS. You set fonts and colors using Canvas API methods, not by CSS styling. The best I can think of as a counterpart to an external CSS file is an external JavaScript file where you just assign values to variables used in your code for drawing on canvas. That file could be made very simple, just assignments, so it would not require any substantial understanding of JavaScript to edit it.
Related
I've been using Figma a lot lately to draw / edit images and export them as SVG files so I can quickly use inside my apps' code bases.
There's just one drawback with that: Looking through the SVG code to find out what element is what.
Up to this moment I'm having to go through the SVG manually in order to mark the elements (with classes or ids) so that I can manipulate them properly via CSS or Javascript, what's quite tedious :-/
It would be really convenient to be able to set an id or a class to each element (path, line, circle etc..) via Figma and have it reflected in the exported code, I strongly believe that there must be a way to do so...
So here I ask: Is there a way to set certain CSS **class** or **id** atribute in Figma and have it declared on the svg code that gets exported?
There's a checkbox "include id attribute" in the export section.
It inserts the element's layer name as the id attribute on the resulting svg tag.
yay š
I am making a form using bootstrap and I would like to make some of the text a "brand color" like you see in the buttons. I know about the text colors available using text-primary etc.
However, I would like to use the button colors for the text.
I tried this
<style>
em {
background-color: #brand-danger;
}
</style>
Also I found the default values for bootstrap colors here http://getbootstrap.com/css/#less but i just want to use their variable or class without manually using the hex value.
What is the way to use their color?
You'll need to create your own LESS/SASS source, tie it in with bootstrap, create your custom styles, then run it through the compiler. The variables, such as #brand-primary/$brand-primary, are only meaningful in the LESS/SASS languages.
And, since BS4 is going SASS, I suggest (if you're going down that path) you do as well.
Example (I'll use LESS since it's more common):
Download the Bootstrap LESS source
Create a new LESS stylesheet for your project and place it along side the others (such as bootstrap.less, mixins.less, etc.)
Add a reference to your new stylesheet within bootstrap.less (this can be done using the #import directive, but make sure to place it towards the bottom).
Compile your new styles.
I'm trying to create a flexible sprite solution for my website whereby I can have one version of each icon within the sprite image but have the ability to change it';s colour dynamically. I know you can do this if you embed the SVG into your page but I don't want to do this as I will be using it as a background-image in css/sass. I have looked at the following article which looks promising and have it working as described in Chrome but having also looked at caniuse.com (http://caniuse.com/#search=URI) I have also realised that IE only support base64 image data. This prevents me from changing the fill colours of the paths in my SVG data.
Modify SVG fill color when being served as Background-Image
I am using gulp with my project and my question is, would I be able to convert something like this which will be in my sass file:
background:url('data:image/svg+xml;utf8,<svg> ... </svg>');
into a base64 version like so with gulp?
background:url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uP...');
This would enable me to change the colours dynamically with variables etc in my sass but also have IE support.
This looked like it might be a possibility but I'm not sure if it would work as my image is data to begin with whereas in the example, it's an iamge URL.
http://stefanimhoff.de/2014/gulp-tutorial-7-base64/
Found a solution - https://www.npmjs.com/package/gulp-css-str2base64.
This allows me to wrap my SVG data string in the str2base64 function which then converts it. I run this task after my sass task to ensure the variables have been applied before the data is encoded.
Here is a demo SVG file. Please use Firefox for viewing because currently it seems to be the only properly showing browser.
The task is to construct a pure SVG document (e.g. not html-embedded) that will be able to show tooltips using only CSS features (no JS and also no :before/:after pseudo-elements). I managed to achieve this by using the HTML foreignObject element.
However, I can not find if it is possible to position such elements in relation (e.g. 10px to the left and top from it) to other in-document SVG objects without using JavaScript for it and without embedding the SVG file itself into some other document format (e.g. HTML).
In the final version of the file there will be 20-30+ tooltips, so it is desirable to avoid manual positioning. I was hoping there would be something for "attaching" them to other objects (withthe use of their IDs) or at least to their parent objects, but my search results only return documentation and questions regarding JS or HTML implementations.
add. notes:
1) CSS-only SVG file is required because the file is intended to be used on wiki sites, which prohibid SVGs that have javascript in them.
2) If I understand correctly, displaying HTML formatting in HTML foreignObject element is not a current SVG standard requirement for SVG user agents (i.a. web-browsers). However, Firefox seems to properly display them, and Iād rather use that (even not fully supported) opportunity. If I am missing some easier ways of achieving the same thing ā please do tell about them.
3) SVG code backup: pastebin.
Unfortunately, you can't achieve this effect using just CSS because positions in SVG are attributes, not styles.
I'm wondering if I can create multiple "brushes" in a single SVG file and use them thoughout my CSS.
Right now I have a single SVG file that has a gradient stored in the "defs" and a single rectangle that draws it. Then I use this SVG file as a background image in my CSS. It works well but I'd rather not have a million separate SVG files. I'd like to combine like "brushes" together in a single SVG file something like CSS sprites or XAML is capable of.
Is there a way to do this? If so what's the syntax to specify for the CSS background image which SVG element from the svg file to use?
Thanks for any help.
In theory yes, that should be possible. It's not yet fully defined in a w3c spec though and the implementations do differ at this stage.
Note that svg itself allows a special fragment syntax, so in theory you should be able to link to different views of the same svg file. That could be used to do CSS/SVG sprites.
Linking directly to the id of a nested svg fragment (or to any other element inside the svg) is something that would need to be further specified.
Assuming that linking with fragments from a CSS background property works, then a possibility if you use XHTML (serving the resulting file as application/xhtml+xml) is to just include the svg resources inline in the main document, eliminating the need for many separate files. This can be done as a pre-publishing buildstep if you wish to keep the svgs separate for editing. Another possibility is to use data uris.
I'm also seeking for the same, and here are the pointers I could find:
17.3 Linking into SVG content: IRI fragments and SVG views (w3.org)
SVG Stacks (simurai.com)
Can I use SVG fragment identifiers? (caniuse.com)
Better SVG Sprites With Fragment Identifiers (broken-links.com)
According to caniuse.com, there is an issue with browser support, but that does not prevent you to try and observe future browser evolution (in the hope a future day they will all support this obvious feature).