I see that you can reference the svg by id in some css/svg properties, as in:
<!-- the logo svg -->
<svg id="rect-container" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- left squares -->
<rect fill="url(#rect-fill)"/>
</svg>
does anyone know if we can use a svg from the page, in a css bg for example? to avoid encoding it on the css.
Something like this, which I already tried but did not seem to work the same way.
.myel {
background-image: url(#rect-svg-image);
}
First, there is a misconception to clear up.
fill: url(#source);
does not reference arbitrary SVG content, but a paint server, namely a gradient or pattern. Other uses of the CSS url() notation in SVG include the clip-path, mask and marker-start|mid|end properties that all also can only reference specific elements.
Currently, background-image needs an actual self-contained image resource or a CSS gradient. Referencing a SVG paint server with url() does not work.
But the CSS Images Module Level 4 also defines a element() functional notation that can reference fragments inside the page.
If you look at the text of the specification, there are still a lot of open questions listed to solve before this can become mainstream. There currently is only a Firefox implementation with vendor prefix, -moz-element(). You can point it to paint servers; that means you can (mis)use a <pattern> element. Although experimenting, I found there are some tradeoffs to make:
patternContentUnits="objectBoundingBox" needs all content drawn into a 1px*1px square, but makes the content scalable. Preserving the aspect ratio is not supported.
patternContentUnits="userSpaceOnUse" gives you preservation of the aspect ratio, but scaling is not supported.
svg {
display: block;
width: 0;
height: 0;
}
div {
width: 200px;
height: 150px;
border: 1px solid black;
background-image: -moz-element(#image);
background-size: cover;
}
<svg>
<pattern patternContentUnits="objectBoundingBox"
preserveAspectRatio="xMidYMid meet"
width="100%" height="100%" id="image">
<rect width=".5" height=".5" fill="red"/>
<rect width=".5" height=".5" x=".5" fill="yellow"/>
<rect width=".5" height=".5" y=".5" fill="green"/>
<rect width=".5" height=".5" x=".5" y=".5" fill="blue"/>
<circle r=".5" cx=".5" cy=".5" fill="white" opacity=".5"/>
</pattern>
</svg>
<div>
I have a massive image of a map embedded in an SVG, which is much larger than the browser window and centered on the screen.
<svg id='map' width='7192' height='3912' viewBox='0 0 7192 3912' version='1.1'>
<image width='7192' height='3912' x='0' y='0' preserveAspectRatio='none'
xlink:href='map.jpg' />
<!-------------------->
<!-- paths are here -->
<!-------------------->
</svg>
There are two paths. One path outlines a building. The other path outlines a sub-region on the map.
The user can click on these paths, at which point that specific path will gradually be centered in the middle of the screen using a transition.
Once the path is centered, what I would like to do is clip or mask everything outside of that path, so that the only visible part of the image/map is the path that was selected and centered.
Does anybody know how to do this?
I've tried using clipPath natively in HTML and also applying it to the SVG in CSS, both of which don't seem to work. Either that or I'm doing something wrong.
Here is a working demo of the project.
The building can be located near the top middle section of the map. The sub-region, which is easier to locate considering its size, is located in the bottom right hand corner of the map. If you mouseenter them, the paths will fill. If you click on them, they will be centered on the screen.
You can re-use the clip path content as a target area for pointer events if you combine sibling selectors with the right value for pointer-events. Setting this property will both define when CSS pseudo-classes apply and which mouse events will be captured. Your centering code could be triggered by a click event.
document.querySelectorAll('.highlight').forEach(use => {
use.addEventListener('click', e => {
alert(use.id + " was clicked.");
});
});
.highlight {
fill: none;
pointer-events: fill;
}
image {
pointer-events: none;
}
#h1:hover ~ image {
clip-path: url(#clip1);
}
#h2:hover ~ image {
clip-path: url(#clip2);
}
<svg width="500" height="331">
<clipPath id="clip1">
<rect id="path1" x="20" y="20" width="80" height="80" />
</clipPath>
<clipPath id="clip2">
<circle id="path2" cx="400" cy="200" r="80" />
</clipPath>
<!-- use elements must be direct siblings preceding the image -->
<use class="highlight" id="h1" xlink:href="#path1" />
<use class="highlight" id="h2" xlink:href="#path2" />
<image xlink:href="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" width="500" height="331" />
</svg>
I would like to change the default appearance of tooltip in svg elements (title) by any means such as js or css.
I even tried stuff like this:
var title = document.createElementNS('http://www.w3.org/2000/svg','title');
title.textContent='<foreignObject width="100" height="50" requiredExtensions="http://www.w3.org/1999/xhtml"><div style="background:blue;">'+arr[j].ypos+'</div><foreignObject>';
rect.appendChild(title);
but regardless of whatever i insert as the textContent of title, its simply rendered as a string.
Is there any way to style the default tooltip? Other simple and straightforward alternatives for creating tooltips in svg without using any plugins are also welcome...
You could try this: How to change the style of Title attribute inside the anchor tag?. I didn't test it, so I don't really know if it works.
But since you are using SVG, you can do better than that since you can draw tooltips with any color and shape, even animated. Since you are generating it dynamically with a script, you can calculate the size based on the content and alter the height and width accordingly.
Here is an example of a tooltip using a rounded rectangle in SVG:
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<g id="component">
<rect id="content" width="50" height="50">
</rect>
<g class="tooltip" transform="translate(20,20)" opacity="0.9">
<rect rx="5" width="100" height="25"></rect>
<text x="15" y="16">Hello</text>
</g>
</g>
</svg>
I used CSS hover to make it appear and disappear:
#component .tooltip {visibility: hidden}
#component:hover .tooltip {
visibility: visible;
}
.tooltip text {
fill: black;
font-size: 12px;
font-family: sans-serif;
}
.tooltip rect {
fill: yellow;
stroke: blue;
}
You can experiment with it in this JSFiddle.
You can also store your tooltips in a <defs> block and reuse it in different objects.
I am having issues with an SVG clipping mask that's applied to an image. This works correctly in Firefox, but in Chrome and IE the clipping mask works in reverse (not had a chance to try other browsers yet).
Here's what I mean-
Firefox
Chrome/IE
<svg height="0" width="0" >
<defs>
<clipPath id="clipPath" stroke="white" stroke-width="10">
<path d="M252.294,0.26l-203.586,0c0,0-47.43,1.586-48.207,38.876c0.777,37.29,48.207,38.877,48.207,38.877h203.586
c0,0,47.43-1.587,48.207-38.877C299.724,1.847,252.294,0.26,252.294,0.26z"/>
</clipPath>
</defs>
<div id='board_img_1' class='board_imgs'>
<img src="./images/board1.png" style=" clip-path: url(#clipPath);
width: 100%;
height: 100%;"></div>
<div id='board_img_2' class='board_imgs'>
<img src="./images/board2.png" style=" clip-path: url(#clipPath);
width: 100%;
height: 100%;"></div>
</svg>
Here's my HTML. I'm not sure where to begin even trying to fix this and it seems like a fairly specific issue.
As Michael Mullany suggested, try changing img to image and changing your div tags.
http://www.w3schools.com/svg/svg_reference.asp
Here is a page that might help with regards to what you can/can not use.
There is also some examples of how to use SVG here:
http://www.w3schools.com/svg/svg_examples.asp
Lastly, check out this link for browser support for SVG and its various uses:
http://caniuse.com/#cats=SVG
I have a webpage where I will repeat the logo of my company several times - one time in big size, white logo ; one time in small size, white logo ; one time in small size, orange logo.
For now I'm using JPG files - all good with 3 JPGs.
But I wonder whether I can use SVG for this use case, ideally without duplicating the SVG code within the page.
Would you have any clue?
Thanks,
Nicolas
Maybe this can serve as an inspiration for you: I'm embedding a bogus logo inside the HTML and using CSS to scale and color it differently. This is the HTML:
<h1>my page</h1>
<div class="big logo" title="big logo">
<svg id="logo" viewBox="0 0 50 50">
<rect x="1" y="1" stroke-width="2" width="48" height="48"/>
<circle cx="25" cy="25" r="23" fill="currentColor"/>
</svg>
</div>
<div>some text on my page and a small logo</div>
<div class="logo">
<svg id="smallLogo">
<use xlink:href="#logo"/>
</svg>
</div>
<div>some more text on my page and a differently colored logo</div>
<div class="yellow logo">
<svg id="smallLogo">
<use xlink:href="#logo"/>
</svg>
</div>
And the CSS:
.logo > svg {
fill:green;
stroke:blue;
color:red;
height:75px;
width:75px;
}
.big.logo > svg {
height:200px;
width:200px;
}
.yellow.logo > svg {
fill:yellow;
color:orange;
stroke:black;
}
See example on jsFiddle. Unfortunately, this only seems to work with Firefox and Chrome. Neither Opera nor Internet Explorer seem to like this (also not the new versions 9 and 10). Didn't try Safari.
So, I guess, unless you want to restrict the viewers to Webkit and Firefox browsers or use JavaScript to duplicate the SVG and modify certain attributes of the different instances, you're better off with either three different JPEG files (PNG would be better), or two different SVG files (in two different colors -- you can obviously rescale without problems).
If you don't need to use the image as a CSS background, then it's possible to use the SVG Stacks technique to do this.
Here's an example, a single svg file that contains several different icons, where the size of the image also decides how the svg looks.
Here's a part of that svg file to illustrate:
<?xml version="1.0" encoding="utf-8"?>
<svg id="icon" class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<style>
svg .icon { display: none }
svg .icon:target { display: inline }
/* media-queries can control the appearance too */
#hours {
fill:none;
stroke:#850508;
stroke-dasharray:1,5.28;
stroke-dashoffset:0.5;
stroke-width: 1.5px;
}
#media screen and (max-width: 128px) {
#hours {
stroke-dasharray:1, 17.84;
stroke-width: 2px;
}
}
#media screen and (max-width: 64px) {
#hours {
stroke-dasharray: none;
}
}
/* shared styles */
.icon * { fill: #850508; }
</style>
</defs>
<svg viewBox="0 0 32 32">
<g id="clock" class="icon">
<path d="M16,4c6.617,0,12,5.383,12,12s-5.383,12-12,12S4,22.617,4,16S9.383,4,16,4 M16,0 C7.164,0,0,7.164,0,16s7.164,16,16,16s16-7.164,16-16S24.836,0,16,0L16,0z"/>
<path d="M21.422,18.578L18,15.152V8h-4.023v7.992c0,0.602,0.277,1.121,0.695,1.492l3.922,3.922
L21.422,18.578z"/>
<path id="hours" d="M16,4c6.617,0,12,5.383,12,12s-5.383,12-12,12S4,22.617,4,16S9.383,4,16,4"/>
</g>
</svg>
<svg viewBox="0 0 32 32">
<g id="star" class="icon">
<polygon points="22.137,19.625 32,12 20,12 16,0 12,12 0,12 9.875,19.594 6,32 16.016,24.32 26.008,32"/>
</g>
</svg>
</svg>
Each icon can have a unique look with different colors, gradients etc (in my example all the icons share the same fill, but they don't have to do that).