My idea is to inject inline SVG to my HTML using template literals.
The purpose is simply use benefits of styling inline SVG icons with CSS but avoid bloating html code with SVG stuff. Also it's very easy to reuse repeating icons by just adding corresponding class. Also all icons or vector stuff like logo can be stored in single JS file. I know, that's hacky weird idea, but I found it's useful for my project.
So the problem is that my script won't work in browser from my local files.
But it works well in CodePen and JSFiddle.
Local file restrictions are disabled, JS is enabled.
Also any ideas how to optimize it and make it work better are welcome.
var iconLogo = document.querySelectorAll(".ric-logo");
var i;
for (i = 0; i < iconLogo.length; i++) {
iconLogo[i].innerHTML = `
<svg width="120px" height="18px" viewBox="0 0 120 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="ric-logo" stroke="none" stroke-width="1" fill="black" fill-rule="evenodd">
<path d="M23.326087,0 C23.2252174,0 23.1275,0 23.0266304,0 L23.0266304,0 L2.52173913,0 C1.12902107,-8.82200545e-17 1.70558772e-16,1.16795283 0,2.60869565 L0,15 L5.04347826,15 L5.04347826,5.2173913 C5.04347826,4.8572056 5.32573353,4.56521739 5.67391304,4.56521739 L22.9730435,4.56521739 C23.631932,4.55997742 24.1901947,5.0660023 24.2717391,5.7423913 C24.306535,6.10977596 24.1892199,6.47520901 23.948885,6.74807191 C23.7085502,7.02093481 23.3677046,7.17567223 23.0108696,7.17391304 L7.56521739,7.17391304 L7.56521739,11.7391304 L23.0266304,11.7391304 L23.0266304,11.7391304 C23.1275,11.7391304 23.2252174,11.7391304 23.326087,11.7391304 C26.4597026,11.7391304 29,9.11123658 29,5.86956522 C29,2.62789386 26.4597026,1.98495123e-16 23.326087,0 Z" id="Path"></path>
<path d="M64.9565217,1.21154527e-06 L61.173913,1.21154527e-06 C60.170401,-0.000815107822 59.2077021,0.410915432 58.4977174,1.14456624 L49.8796739,10.0532605 C49.6430123,10.2978107 49.3221127,10.4350542 48.9876087,10.4347821 L46.673913,10.4347821 C46.3257335,10.4347821 46.0434783,10.142794 46.0434783,9.78260833 L46.0434783,1.21154527e-06 L41,0 L41,12.3913036 C41,13.8320462 42.1290211,14.9999988 43.5217391,14.9999988 L49.826087,14.9999988 C50.829599,15.0008151 51.7922979,14.5890846 52.5022826,13.8554338 L61.1108696,4.95000041 C61.3493224,4.70184137 61.674158,4.56319679 62.0123913,4.56521787 L64.326087,4.56521787 C64.6742665,4.56521787 64.9565217,4.85720602 64.9565217,5.21739167 L64.9565217,14.9999988 L70,15 L70,2.60869644 C70,1.16795385 68.8709789,1.21154527e-06 67.4782609,1.21154527e-06 L64.9565217,1.21154527e-06 Z" id="Path"></path>
<path d="M114,10 L120,10 L120,16 C120,17.1045695 118.992641,18 117.75,18 L114,18 L114,10 Z" id="Path"></path>
<path d="M106,0 L106,9.7826087 C106,10.1427944 105.720178,10.4347826 105.375,10.4347826 L87.625,10.4347826 C87.279822,10.4347826 87,10.1427944 87,9.7826087 L87,0 L82,0 L82,12.3913043 C82,13.8320472 83.1192881,15 84.5,15 L108.5,15 C109.880712,15 111,13.8320472 111,12.3913043 L111,0 L106,0 Z" id="Path"></path>
</g>
</svg>
`;
}
/* Styling all instances of SVG */
.ric-logo * {
fill: blue;
width: 120px;
height: 15px;
};
<body>
<header class="header-menu">
<div class="ric-logo">
</div>
<div class="menu-content">
<ul>
<li>Item-1</li>
<li>Item-2</li>
<li>Item-3</li>
<li>Item-4</li>
</ul>
</div>
</header>
<main>
<!-- Test repeating SVG class -->
<div class="ric-logo">
</div>
</main>
<footer></footer>
</body>
I'm not sure how you've structured your files, so I might not be reproducing your problems correctly. Let me know if I've made any false assumptions.
Firstly, codepen and the snippets on Stack Overflow automatically include CSS and JS, while local files do not. If you haven't already, you need to include appropriate <script> and <style> tags containing your css and your js.
If you are already doing that and you've just edited them out for the purposes of this question, then another possible problem is that the javascript you've provided you've included at the top of your page. document.querySelectorAll(".ric-logo") won't work until the page has been loaded, and if you put the javascript you've supplied at the top of your page, it will run before the page has finished loading. The easiest way to fix this is to put the javascript at the bottom of your page.
If for some reason you don't want your javascript at the bottom of your page, you need something like jQuery's $(document).ready, or one of the vanilla alternatives from this question.
#Nicholas was right, and the problem was that document.querySelectorAll not working until all the DOM stuff loaded.
So one solution is to place document.querySelectorAll to the bottom of the page.
Another is to use function that run your scripts when pages is loaded. It's explained here.
I applied it to my script and it works well. So if you interested I post the snipped here. It may be helpful for templating using string literals or like in my case dynamically inject Inline SVG.
// Icons SVG injection
// Function that run code when DOM is loaded
function ready(callback){
// in case the document is already rendered
if (document.readyState!='loading') callback();
// modern browsers
else if (document.addEventListener) document.addEventListener('DOMContentLoaded', callback);
// IE <= 8
else document.attachEvent('onreadystatechange', function(){
if (document.readyState=='complete') callback();
});
}
ready(function(){
// All inside tht function executes when DOM is loaded
// Logo SVG
var mySvg = document.querySelectorAll(".my-svg");
var i;
for (i = 0; i < mySvg.length; i++) {
mySvg[i].innerHTML = `
<svg width="188px" height="188px" viewBox="0 0 188 188" version="1.1">
<circle id="Oval" fill="#FC4903" cx="94" cy="94" r="94"></circle>
</svg>
`
};
});
/* styling svg */
.my-svg * {
fill: red;
width: 200px;
height: 200px;
};
<!-- creating container where you like to insert SVG -->
<div class="my-svg">
<div></div>
</div>
I am using the Chartist library in AngularJS in order to create a dynamic chart in an application thatI am making. My goal is to change the css of the bars within the graph but I am not sure how.
When I inspect the HTML of the graph in the application, I see the following code:
< svg xmlns:ct="http://gionkunz.github.com/chartist-js/ct" width="100%" height="80" class="ct-chart-bar" style="width: 100%; height: 80;">
<g class="ct-grids"></g>
<g>
<g class="ct-series ct-series-a">
<line x1="22.5" x2="22.5" y1="45" y2="45" class="ct-bar" ct:value="0">
</line>
</g>
</g>
<g class="ct-labels"></g>
</svg>
I have found that in order to manipulate the bar graph that I need, I can change the x1/x2 and y1/y2 coordinates in the code above.
I have checked in my .html, .scss, and .ts pages but am not able to find any elements that look like they can be manipulated in order to make this change. Where would you go to manipulate these elements? Any help would be greatly appreciated.
I would like to do "complex" animation with gsap and svgs.
but I don't know what is the best approach to this.
it is better to create and to import an unique svg with all the elements or maybe it is better 4 different svgs?
I have 4 different characters: a tree, a lamp, a desk and a man.
basically my animation is move the objects on the x, and appearing and to disappearing stuff.
If the elements of the animation are part of one complex animation, you can use one single SVG for this.
To control the DOM of the SVG via CSS and JavaScript you need to add the SVG directly inline into your HTML page. Not embed via img tag or object tag or similar.
<body>
<h1>My SVG Animation</h1>
<svg width="100" height="100" viewBox="0 0 300 100">
<circle class="animation-element-01" cx="50" cy="50" r="40"/>
<rect class="animation-element-01" x="150" y="20" width="150" height="150"/>
<!-- etc -->
</svg>
</body>
Another advantage of this method is, that there is no additional html requests.
Plus the whole animation can be made responsive via the viewBox.
I'm trying to develop an accessible Bar Chart. As there is no formal ARIA role for graphics just yet, I decided to add role="grid" to my SVG. Most of the stuff is working OK, but the gridcell is always blank when I test my chart using Voice Over.
This is the codepen that illustrates my graph. And this is a video of my testing using Voice Over.
This is how I've configured the gridcell for my rect tag:
<g className={barClass} role="gridcell" aria-label={bar.count + ' ' + bar.fruit}>
<rect width={bar.count * 10} height="19" y={20 * index}/>
</g>
Question: Am I doing something wrong? Why voiceover does not recognize the aria label?
UPDATE 1: I'm using Chrome and Safari and the issue is present in both browsers.
Use the <title> and <desc> elements with the aria-label attribute and the img role as a fallback:
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000802//EN"
"http://www.w3.org/TR/2000/CR-SVG-20000802/DTD/svg-20000802.dtd">
<svg width="6in" height="4.5in" viewBox="0 0 600 450">
<title>Network</title>
<desc>An example of a computer network based on a hub</desc>
<!-- add graphic content here, and so on for the other components-->
</g>
<g id="ComputerA" aria-label="computer A: A common desktop PC" role="img">
<title>Computer A</title>
<desc>A common desktop PC</desc>
</g>
<g id="ComputerB">
<title>Computer B</title>
<desc>A common desktop PC</desc>
</g>
<g id="CableA" aria-label="Cable A: 10BaseT twisted pair cables" role="img">
<title>Cable A</title>
<desc>10BaseT twisted pair cable</desc>
</g>
<g id="CableB">
<title>Cable B</title>
<desc>10BaseT twisted pair cable</desc>
</g>
<g id="CableN">
<title>Cable N</title>
<desc>10BaseT twisted pair cable</desc>
</g>
</svg>
The simplest way to specify a text equivalent for an SVG graphic is to include the following elements in any SVG container or graphics element:
title
Provides a human-readable title for the element that contains it. The title element may be rendered by a graphical user agent as a tooltip. It may be rendered as speech by a speech synthesizer.
desc
Provides a longer more complete description of an element that contains it. Authors should provide descriptions for complex or other content that has functional meaning.
References
SVG Accessibility
SVG Accessibility Testing: Test Assertions with Tables
Tips for Creating Accessible SVG
Using ARIA to enhance SVG accessibility
Accessible SVGs
Just how accessible is SVG?
Current State of Authoring Accessible SVG
Inline SVG used for buttons and links
Text Links: Best Practices for Screen Readers
Accessibility: recommended alt-text convention for SVG and MathML?
The idea is pretty simple:
I have an SVG path and an Rect,
I need to make the path carve through the Rect, the resulting "hole" should be see-through.
Here's jsfiddle with a copy of how it's looking right now:
https://jsfiddle.net/9u0jyhr7/embedded/result/
current HTML example:
<div id="container">
<svg id="theSVG" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect id="theRect" width="100%" height="100%" fill="#ffffff"></rect>
<path id="thePath" d="M7 25.69305419921875L7 25.6875L7.00505256652832 25.6875L293.9971923828125 25.6875L294 25.6875L294 25.709388732910156L294 90.67454528808594L294 90.6875L294.0021667480469 90.6875L321.85845947265625 90.6875L321.8607482910156 90.6875L294 183.69180297851562L294 206.421142578125L294 206.42408752441406L294 206.42701721191406L294 228.93441772460938L294 228.936279296875L294 228.93814086914062L294 248.68634033203125L294 248.6875L294.0007629394531 248.6875L304.7754211425781 248.6875L304.7763671875 248.6875L304.7773132324219 248.6875L306.581298828125 248.6875L306.581298828125 248.6875L306.582275390625 248.6875L306.582275390625 248.6875L306.583251953125 248.6875L306.583251953125 248.6875L324.73028564453125 248.6875L324.7316589355469 248.6875L324.7330017089844 248.6875L330.1683044433594 248.6875L330.1697998046875 248.6875L330.1712951660156 248.6875L357.22027587890625 248.6875L357.22265625 248.6875L357.2250061035156 248.6875L360.99749755859375 248.6875L361 248.6875L507 172.48577880859375L507 342.3311767578125L507 342.3337097167969L502.9844665527344 341.6875L436.00836181640625 341.6875L436 341.6875L436 341.6893615722656L436 378.0494079589844L436 378.051513671875L436 378.0536193847656L436 406.68511962890625L507 448.48748779296875L507 448.4908447265625L507 578.6819458007812L507 578.6875L506.9949951171875 578.6875L479.0045166015625 578.6875L479 578.6875L289.9993591308594 341.6875L279.00048828125 341.6875L279 341.6875L278.99951171875 341.6875L273.92425537109375 341.6875L273.9237976074219 341.6875L273.92333984375 341.6875L270.4071350097656 341.6875L270.4067077636719 341.6875L270.4062805175781 341.6875L265.60040283203125 341.6875L265.6000061035156 341.6875L265.5995788574219 341.6875L264.8004150390625 341.6875L264.79998779296875 341.6875L264.7995910644531 341.6875L263.8423156738281 341.6875L263.8419189453125 341.6875L263.84149169921875 341.6875L263.2403869628906 341.6875L263.239990234375 341.6875L263.2395935058594 341.6875L253.1584930419922 341.6875L253.15809631347656 341.6875L253.15769958496094 341.6875L251.40040588378906 341.6875L251.39999389648438 341.6875L251.39959716796875 341.6875L245.081787109375 341.6875L245.0813446044922 341.6875L245.08090209960938 341.6875L223.00071716308594 341.6875L223 341.6875L9.995001792907715 578.6875L7.00505256652832 578.6875L7 578.6875L7 578.6819458007812 " fill="#000000"></path>
</svg>
</div>
Here's an image of what it would probably look like if we can carve that hole:
http://i.stack.imgur.com/5fjBR.png
The Path is dynamically generated and can be quite complex, so I can't really eyeball the result.
It has to be done in javascript (or with some very clever usage of styles).
I need the result to be a DOM node that I can eventually move between z-indexes (could be grouped? a resulting "difference" path calculated in js?).
Performance and experimental features are not an issue, this is aimed at nwjs app.
Some other notes:
I'm already using jQuery, svg.js and a bunch of other libraries, so adding
new libraries is not a problem.
The rect could also be replaced by just a color filled div, if that helps solve the problem.
Ive already tried masks and clips but couldnt come to a working solution.
Any help appreciated, Thank you in advance.
A mask is what you need. I'm not sure what you tried before, but it should do what you want.
Just create a mask like so:
<defs>
<mask id="theMask">
<rect width="100%" height="100%" fill="white"/>
<path id="thePath" d="..." fill="#000000"></path>
</mask>
</defs>
Either move the original path into the mask, or copy it and hide the original.
Then apply the mask to the rect
#theRect {
mask: url(#theMask);
}
Demo fiddle here