Consider this javascript code:
const profileImageURL = 'https://api.images.com/image/' + id +'/profile';
let profileImage = [];
async function getProfileImage() {
const response = await fetch(profileImageURL);
profileImage = await response.json();
};
and this svelte template code:
<div class="thumbImg">
{#await getProfileImage()}
<div class='spinnerHolder'
in:fade={{duration: 500}}
out:fade={{duration: 500}}
on:introstart={() => doneLoading = false}
on:outroend={() => doneLoading = true}
>
<svg class="spinner" viewBox="0 0 50 50">
<circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle>
</svg>
</div>
{:then value}
{#if doneLoading}
<img transition:fade alt='profile-image' src={profileImage.url}/>
{/if}
{/await}
</div>
and css:
.thumbImg {
width: 64px;
height: 64px;
display:inline-block;
background-color: var(--border-color);
border: none;
border-radius: var(--large-radius);
overflow: hidden;
img {
min-width: 64px;
border-radius: var(--large-radius);
border-image-width: 0;
}
}
The above loaded images arrive at different widths and heights. Some portrait and some landscape. They need to all be displayed in a square 1:1 box that is 64px x 64px without white space at the side or the bottom. How can I maintain the aspect ratio of these dynamically loaded images so that they either fill the width or height depending on which is needed ? Ideally they would also be offset so they are centered in the 1:1 box.
Visual Examples of the problem:
Updated answer building on Rich's comment below
You can use the object-fit and object-position CSS properties together to fine tune the way the image is displayed inside its content box:
.thumbImg {
width: 64px;
height: 64px;
display:inline-block;
background-color: var(--border-color);
border: none;
border-radius: var(--large-radius);
overflow: hidden;
img {
height: 64px;
width: 64px;
object-fit: cover; // this will make the image cover the content box, clipping horizontally if the original image is landscape orientation, or vertically if it is portrait orientation
object-position: 50% 50%; // this will center the image in the content box (i.e. clip on the left & right if source is landscape and clip top & bottom if source is portrait)
}
}
With this, you do not need to modify your code any further.
Original answer, using CSS background images
You can achieve the desired positioning by using background image CSS properties rather than an img tag, for example:
.avatar {
height: 64px;
width: 64px;
background-size: cover; // this will make the image cover the div, clipping horizontally if the original image is landscape orientation, or vertically if it is portrait orientation
background-position: 50% 50%; // this will center the image (i.e. clip on the left & right if source is landscape and clip top & bottom if source is portrait)
}
With this, all you have to do is replace your <img> tag with a <div class="avatar"> tag and set the background image source dynamically:
<div class="thumbImg">
{#await getProfileImage()}
<div class='spinnerHolder'
in:fade={{duration: 500}}
out:fade={{duration: 500}}
on:introstart={() => doneLoading = false}
on:outroend={() => doneLoading = true}
>
<svg class="spinner" viewBox="0 0 50 50">
<circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle>
</svg>
</div>
{:then value}
{#if doneLoading}
<div
transition:fade
class="avatar"
alt="Profile image"
style="background-image: url('{profileImage.url}')"
/>
{/if}
{/await}
</div>
Of course the downside is that you're not using a native image tag anymore, and maybe this is important to you. On the upside, it works without having to use javascript-based DOM manipulation.
You can either make the images width and height relative to the parent div by using percentage values or just set the images to the required max-width and max-height
.thumbImg {
max-width: 64px;
max-height: 64px;
display:inline-block;
background-color: var(--border-color);
border: none;
border-radius: var(--large-radius);
overflow: hidden;
img {
max-width: 100%; //relative to the parent DIV
border-radius: var(--large-radius);
border-image-width: 0;
}
}
I would like to create a background to one of my HTML pages like the one shown in the picture, and when a user hovers over one of the triangular sections, the opacity of that specific section would change. What is the best way to do that?
In SVG, you could make use of the polygon elements to create your triangles within the square and each polygon is hover-able separately.
.square {
height: 400px;
width: 400px;
overflow: hidden;
}
svg {
height: 100%;
width: 100%;
}
polygon {
fill: aliceblue;
stroke: crimson;
stroke-linejoin: round;
}
polygon:hover {
fill: cornflowerblue;
}
<div class='square'>
<svg viewBox='0 0 100 100'>
<a xlink:href='http://google.com'>
<polygon points='5,5 50,50 95,5' />
</a>
<polygon points='5,5 50,50 5,95' />
<polygon points='5,95 50,50 95,95' />
<polygon points='95,5 50,50 95,95' />
</svg>
</div>
I would use Adobe Illustrator to draw/create the section/s you want as a background. Then save it in a SVG file.
Open SVG file with a browser and copy all the tag in your HTML file.
And then use JS, Jquery, libraries to do what you want.
Example?
This is my home www.triiio.it
Is there any way to resample a raster picture inside an <image> tag that itself is inside a <svg> container after I scale (transform) the container?
I have a 640x640px jpeg. It looks like this on the page (it's a popup on a map that enlarges on hover).
<svg class="photo" style="top: 425px; left: 1406px;">
<image width="64" height="64" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../images/someimg.jpg"></image>
</svg>
css:
.photo {
position: absolute;
width: 54px;
height: 54px;
transform-origin: 50% 119%;
box-shadow: 5px 5px 3px #999;
overflow: visible;
cursor: pointer;
}
.photo image {
clip-path: url(#clipper);
}
clipped by
<svg>
<defs>
<clipPath id="clipper">
<polygon points="0,0 56,0 56,56 36,56 28,64 20,56 0,56 0,0"/>
</clipPath>
</defs>
</svg>
Previously I tried css scaling:
photo:hover {
transform: scale(2.5);
}
it worked great: the <image> inside looked sharp after the transform, but hover itself looked ugly when interrupted. So I tried to do it with d3.transition()
$photoSvg.on('mouseover', function() {
d3.select(this).transition()
.duration(400)
.style('transform', 'scale(2.5)');
})
.on('mouseout', function() {
d3.select(this).transition()
.duration(400)
.style('transform', 'scale(1)');
});
There is a strange effect now. When I first hover after the page reload there is no transition but the svg scales and the <image> looks kind of sharp. But on consecutive transitions I see the animation but the image is sharp only when it is small. When it is scaled 2.5 times it looks just like a stretched image from scale(1).
Any light shed would be much appreciated.
Thanks.
I have embedded an svg file into an html file and can view it in all browsers and platforms. I now want to make specific paths within the svg clickable. I have used an onclick event to perform this function, however, I have only been able to get a javascript alert box to popup when the path is clicked. Instead of the default javascript alert, I need a custom popup which I can then include unique custom text and a hyperlink url for each of the paths. Therefore, each path would have its own text and hyperlink.
Does anyone know the best/easiest way to accomplish this?
Excerpts from my code below:
<script>
function notify(evt){alert(evt.target.id)}
</script>
<style>
path:hover {
fill: #456353; opacity: .5
}
</style>
<svg version="1.1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
x="0px" y="0px" width="771.429px" height="986.584px" viewBox="0 0 771.429 986.584" enable-background="new 0 0 771.429 986.584"
xml:space="preserve">
<g id="Base_map" display="none">
<g id="ahf8dJ.tif" display="inline">
<path onclick="top.notify(evt)" id="Plot1" fill="#BDD5CC" stroke="#939598" stroke-miterlimit="10" d="M585.308,538.849l68.457,19.287l-0.662,6.611
l14.383,3.473l3.637,6.115l-7.439,24.797l52.404,22.814l3.307-4.795c0,0-6.613-1.322-12.729-4.793
c-6.117-3.473-11.076-11.076-16.037-19.176c-4.959-8.102-11.406-24.303-13.885-30.748c-2.48-6.447-9.313-8.322-15.484-11.518
s-6.725-4.848-8.816-8.928c-2.094-4.076-5.182-0.77-9.479,2.756c-4.299,3.527-14.658,0.332-18.734-0.66
c-4.078-0.992-13.006-3.197-19.838-3.748c-6.622-0.534-11.512-2.177-18.828-4.151L585.308,538.849z" />
<path onclick="top.notify(evt)" id="Plot2" fill="#BDD5CC" stroke="#939598" stroke-miterlimit="10" d="M668.644,531.851
c1.652,5.621,2.645,10.084,3.305,12.729c0.662,2.645,0.662,5.125-1.652,5.291s-7.439-1.984-10.912-5.455
c-3.471-3.473-4.133-5.457-3.305-13.061c0.826-7.604,0.992-13.061,4.133-13.887s5.125,3.141,5.951,5.951
S668.644,531.851,668.644,531.851z"/>
<path onclick="top.notify(evt)" id="Plot3" fill="#BDD5CC" stroke="#939598" stroke-miterlimit="10" d="M520.358,495.1c9.752,1.487,25.291,6.499,32.4,8.152
c7.107,1.653,20.168-1.323,27.938-3.637c7.77-2.314,9.424-0.496,12.068,1.653c2.645,2.148,6.281,6.446,9.918,11.241
s1.322,7.604-0.496,11.572c-1.818,3.967,0.992,3.967,4.959,6.117c3.969,2.148,4.959-1.324,7.439-4.133
c2.48-2.811,6.117-2.48,9.754-0.662s6.447,7.936,9.422,12.068c2.977,4.133,4.133,3.471,11.242-0.166s9.422-15.539,9.422-20.168
s1.158-8.1,3.141-9.092c1.984-0.991,1.984-2.976,1.158-6.944c-0.014-0.066-0.315-1.538-0.332-1.612l-2.634,2.961
c-5.442,5.389-9.572,2.361-9.572,2.361c-3.515-1.625-5.985-2.104-5.985-2.104c-2.828-0.583-2.688-3.301-2.688-3.301
c-1.438-4.905-4.737-1.592-4.737-1.592c-5.55,6.503-23.852-2.333-23.852-2.333c-8.073,14.763-13.349,2.333-13.349,2.333
c-3.5-8.372-13.794-5.053-13.794-5.053c-29.848,9.112-39.272,4.207-39.272,4.207l-19.986-5.606L520.358,495.1z"/>
<path onclick="top.notify(evt)" id="Plot4" fill="#BDD5CC" stroke="#939598" stroke-miterlimit="10" d="M626.487,533.173c3.307,4.465,4.299,6.943,1.322,6.777
c-2.975-0.164-16.695-1.982-25.953-3.637c-9.258-1.652-18.846-4.959-29.426-7.439c-10.58-2.479-15.209-4.297-17.523-5.289
s-4.463-3.141,0.496-3.803c4.959-0.66,14.879,0.662,18.35,1.984s16.035,5.125,19.672,6.447s12.398,5.291,15.705,5.125
s6.117-2.148,7.439-3.803c1.322-1.652,5.125-2.977,6.281-1.322C624.009,529.867,626.487,533.173,626.487,533.173z"/>
Add a custom attribute to each of your paths to store the URL you want to open:
<path d="M10,60 L50,10 90,60" data-url="http://www.google.com/" />
Then access this URL in your event handler:
var url = evt.target.getAttribute('data-url');
Then open a popup window with that URL:
window.open(url);
So the complete script becomes:
function notify(evt){
var url = evt.target.getAttribute('data-url');
window.open(url);
}
If I am right in that your need is for something like alert("xxx") which can contain any HTML...
There's 3 parts: a style, a div and a function to show the popup
<style>
#popupInfo
{
visibility: hidden;
position: absolute;
top: 100px;
left: 100px;
width: auto;
height:auto;
margin-left: 5px;
z-index: 5;
background-color: #ffffff;
padding: 0px;
border: 1px solid #a0a0a0;
border-radius: 10px;
box-shadow: 1px 3px 2px rgba(20,20,20,0.3);
}
#closeButton
{
position: absolute;
width: 32px;
height: 32px;
background: transparent url(X_light.gif);
right: 5px;
top: 5px;
}
#closeButton:hover
{
background: url(X_dark.gif);
z-index: 99;
}
</style>
<body>
<div id="popupInfo"">
<div id="closeButton" onclick="document.getElementById('popupInfo').style.visibility = 'hidden';"></div>
<table style="width:100%;">
<tr style="height:32px;"><td ></td></tr>
<tr><td id="popupInfoText"></td></tr>
</table>
</div>
...
<script type="text/javascript">
function popupInfo(newtext, width, height){
var popStyle= document.getElementById("popupInfo").style
if( width ) popStyle.width=width.toString()+'px';
if( height ) popStyle.height=height.toString()+'px';
document.getElementById("popupInfoText").innerHTML = newtext;
popStyle.visibility = 'visible';
}
</script>
The "X_light.gif" and "X_dark.gif" are 32x32pixel grey X's on transparent used as the Close button.
A call to e.g. popupInfo("<H1>Alert!</H1>This is a message!"); will show the message.
To get an html document from a file you could do it several ways, if they are fixed files then you could:
popupInfo("<IFRAME src='message.html'></IFRAME>");
where message.html is like:
<H1>Hello there!</H1>
<p>This is a test message</p>
The result being:
...a nice image that I can't post as a guest :(
Enjoy!
TonyWilk
I have a series of svg rectangles (using D3.js) and I want to display a message on mouseover, the message should be surrounded by a box that acts as background. They should both be perfectly aligned to each other and to the rectangle (on top and centered). What is the best way to do this?
I tried adding an svg text using the "x", "y", "width" and "height" attributes, and then prepending an svg rect. The problem is that the reference point for the text is in the middle (since I want it centered aligned I used text-anchor: middle), but for the rectangle it's the top left coordinate, plus I wanted a bit of margin around the text which makes it kind of a pain.
The other option was using an html div, which would be nice, because I can add the text and padding directly but I don't know how to get the absolute coordinates for each rectangle. Is there a way to do this?
Can you use simply the SVG <title> element and the default browser rendering it conveys? (Note: this is not the same as the title attribute you can use on div/img/spans in html, it needs to be a child element named title)
rect {
width: 100%;
height: 100%;
fill: #69c;
stroke: #069;
stroke-width: 5px;
opacity: 0.5
}
<p>Mouseover the rect to see the tooltip on supporting browsers.</p>
<svg xmlns="http://www.w3.org/2000/svg">
<rect>
<title>Hello, World!</title>
</rect>
</svg>
Alternatively, if you really want to show HTML in your SVG, you can embed HTML directly:
rect {
width: 100%;
height: 100%;
fill: #69c;
stroke: #069;
stroke-width: 5px;
opacity: 0.5
}
foreignObject {
width: 100%;
}
svg div {
text-align: center;
line-height: 150px;
}
<svg xmlns="http://www.w3.org/2000/svg">
<rect/>
<foreignObject>
<body xmlns="http://www.w3.org/1999/xhtml">
<div>
Hello, <b>World</b>!
</div>
</body>
</foreignObject>
</svg>
…but then you'd need JS to turn the display on and off. As shown above, one way to make the label appear at the right spot is to wrap the rect and HTML in the same <g> that positions them both together.
To use JS to find where an SVG element is on screen, you can use getBoundingClientRect(), e.g. http://phrogz.net/svg/html_location_in_svg_in_html.xhtml
The only good way I found was to use Javascript to move a tooltip <div> around. Obviously this only works if you have SVG inside an HTML document - not standalone. And it requires Javascript.
function showTooltip(evt, text) {
let tooltip = document.getElementById("tooltip");
tooltip.innerHTML = text;
tooltip.style.display = "block";
tooltip.style.left = evt.pageX + 10 + 'px';
tooltip.style.top = evt.pageY + 10 + 'px';
}
function hideTooltip() {
var tooltip = document.getElementById("tooltip");
tooltip.style.display = "none";
}
#tooltip {
background: cornsilk;
border: 1px solid black;
border-radius: 5px;
padding: 5px;
}
<div id="tooltip" display="none" style="position: absolute; display: none;"></div>
<svg>
<rect width="100" height="50" style="fill: blue;" onmousemove="showTooltip(evt, 'This is blue');" onmouseout="hideTooltip();" >
</rect>
</svg>
You can use the title element as Phrogz indicated. There are also some good tooltips like jQuery's Tipsy http://onehackoranother.com/projects/jquery/tipsy/ (which can be used to replace all title elements), Bob Monteverde's nvd3 or even the Twitter's tooltip from their Bootstrap http://twitter.github.com/bootstrap/
On svg, the right way to write the title
<svg>
<title id="unique-id">Checkout</title>
</svg>
check here for more details https://css-tricks.com/svg-title-vs-html-title-attribute/
I came up with something using HTML + CSS only. Hope it works for you
.mzhrttltp {
position: relative;
display: inline-block;
}
.mzhrttltp .hrttltptxt {
visibility: hidden;
width: 120px;
background-color: #040505;
font-size:13px;color:#fff;font-family:IranYekanWeb;
text-align: center;
border-radius: 3px;
padding: 4px 0;
position: absolute;
z-index: 1;
top: 105%;
left: 50%;
margin-left: -60px;
}
.mzhrttltp .hrttltptxt::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #040505 transparent;
}
.mzhrttltp:hover .hrttltptxt {
visibility: visible;
}
<div class="mzhrttltp"><svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 24 24" fill="none" stroke="#e2062c" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg><div class="hrttltptxt">علاقهمندیها</div></div>
I always go with the generic css title with my setup. I'm just building analytics for my blog admin page. I don't need anything fancy. Here's some code...
let comps = g.selectAll('.myClass')
.data(data)
.enter()
.append('rect')
...styling...
...transitions...
...whatever...
g.selectAll('.myClass')
.append('svg:title')
.text((d, i) => d.name + '-' + i);
And a screenshot of chrome...
I use heroicons for the project I am working on. (This is JSX format) I will handle the tooltip issue with this code.
<svg className="h-6 w-6">
<title>{reasons.join(" ")}</title>
<QuestionMarkCircleIcon className={style} />
</svg>