I have two links that are designed like this:
I’m trying to get my head around a decent solution for this. The text would preferably be PNG images, but text in an SVG would be acceptable as well. I also need a hover state, but that can be done by using a png sprite or text color, so that is not an issue. The biggest problem is to create proper click areas.
HTML/CSS is just somewhat square and limited when it comes to overlapping link/hover areas.
I peeked at SVG solutions, I also considered using multiple squares for "hotspots" or rotating letter by letter using CSS3.
Does anyone have a clever idea on how to solve this? IE9+ support would be nice.
You could do this simply as an svg with two textPaths, where each link is just an <a> tag. Click regions will be automatically computed.
Here's an example:
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="700 0 500 500">
<title>Simple example of using links with svg textPaths</title>
<defs>
<style type="text/css">
text {
font: 50px sans-serif;
text-anchor: middle;
}
a:hover { fill: cornflowerblue; }
</style>
<path id="p1" d="M700 400a200 200 0 1 1 400 0"/>
<path id="p2" d="M700 400a200 200 0 1 1 400 0" transform="translate(0 50)"/>
</defs>
<text>
<a xlink:href="http://www.example.com/first">
<textPath xlink:href="#p1" startOffset="50%">First link</textPath>
</a>
<a xlink:href="http://www.example.com/second">
<textPath xlink:href="#p2" startOffset="50%">Second link</textPath>
</a>
</text>
</svg>
I have a theory. What if you did something like this:
create a container with the text
create a duplicate on a higher z-index
create a solid white overlay with the exact dimensions for each. (used later)
css rotate -90 on all
read this to skew the images opposite ways.
http://www.useragentman.com/blog/2011/01/07/css3-matrix-transform-for-the-mathematically-challenged/
then skew the overlays to match up giving you the appearance of the bended example in your question.
Related
Say we have a single image tag, and we need to blur a specific part of it (for example, for censorship purposes). In the example, we'll say our target image is 100px by 100px, and we want to censor the rectangle at x=25, y=40 with width=20, height=35. How can this be done using CSS?
This is straightforward if you have a parent container, as you can simply render an offset portion of the same image, with a clip or a backdrop-filter applied. However, this is not reliable for my use case, as I cannot guarantee the positioning attributes of the parent and the image itself, so I may not be positioning the element correctly.
<div id="parent">
<img src="/path/to/img.png">
<!-- This -->
<img
id="blurred"
src="/path/to/img.png"
style="clip: rect(25, 40, 20, 35); filter: blur(8px);"
/>
<!-- Or this -->
<div style="left: 25px; top: 40px; width: 20px; height: 35px; backdrop-filter: blur(8px);" />
</div>
On the other hand, if you just have the image, with no access to the parent, CSS might be the only way. There is clip-path and mask.
With clip-path, you're removing everything outside the path, but we want to do the opposite by blurring everything inside the path. You can finesse the path clip the target "portion" while leaving the remainder of the image, but this doesn't seem to support the filter, you're left with an empty white block where you want your blur to be (I haven't had much luck figuring out how to apply the blur here). While this achieves the censorship purpose, it doesn't achieve the UX desired with a blur.
<!-- Reference SVG clip path -->
<svg height="100%" width="100%" viewBox="0 0 100 100">
<defs>
<clipPath id="clip">
<path d="M 0,0 l 100,0 0,100 -100,0 Z M 25,40 l 20,0 0,35 -20,0 Z" />
</clipPath>
</defs>
</svg>
<!-- Clipped image -->
<img src="/path/to/img.png" style="clip-path: url(#clip);" />
A mask has a similar constraint, as we are drawing the image through the mask, which means that we can create a mask of the filtered and blurred parts of the image, and "draw those through the mask" onto the target image. However, this more or less defeats the purpose, as we need to re-render the image in the SVG tag separately, and is brittle if the user resizes the page / image, for example.
Appreciate any suggestions. This has had me stumped for a few days now.
I created a radial with two tiers of options. I did in a way that isn't really dynamic and isn't really responsive to screen size. I now need it to be both of those things. Here is what it looks like when on the screen size I designed it for.
I created a working demo on sandbox that has the dimensions set how I need to use it on. This is what it looks like.
Here is link WORKING DEMO
any help is appreciated. Also keep in mind the outer tiers can have less or more options. it would be great if the blue toggle button would always align at the bottom of the radial like under the En of Energy Loss
I would consider using an SVG ViewBox in order to maintain consistency. What this basically does is create a consistent scalable SVG, mapping the size and coordinates of its container into a consistent range inside the SVG.
For example:
<div height="400px" width="400px">
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="100%" height="100%" stroke="red" fill-opacity="0"/>
<circle r="4" cx="10" cy="10"/>
</svg>
</div>
So it basicalley creates a mapping from the 400x400 dimensions of the div, into the 100x100 of the svg, so the circle positioned at (10, 10) inside the svg will actually be in coordinates (40, 40) of the div
I am attempting to make a world map made from an svg comprising many circles. I based this from a codepen I found here: https://codepen.io/mvaneijgen/pen/NRzENO
E.g.
<svg viewBox="0 0 845.2 458">
<circle class="st0" cx="826.1" cy="110.3" r="1.9"/>
<circle class="st0" cx="819.3" cy="110.3" r="1.9"/>
<circle class="st0" cx="819.3" cy="117.1" r="1.9"/>
<circle class="st0" cx="812.6" cy="90" r="1.9"/>
The map is great. I have been dividing it up into coloured continent regions using classes. These change colour when hovered over. All good so far. Most of my functionality is there.
The issue is that you have to be hovering directly on a circle to make the colour change happen. I am using a javascript mouseover event to change the colour.
Is there any way of increasing the area of effect around the circle elements? Maybe putting an invisible square either behind or in front? I am still getting to grips with front-end stuff and any pointers here would be great.
That’s the right idea: transparent rects behind each circle. (Or transparent continent-shaped paths based on geo data, depending on what you’re going for.)
The trick is to use the SVG CSS property pointer-events. Setting it to fill or all should do the trick.
I want to animate an image for The Center for Humane Technology for use on a html landing page. The image looks like this and contains 28 gears positioned in a heart shape. I would like to have each gear to rotate continuously around its center, either clockwise or counter-clockwise.
I have read the other SO posts that deal with similar issues, but the solutions do not work for me. When I add e.g. an animateTransform to the shape of a gear, specifying its center coordinates, then it rotates in a wide circle around its center, not staying into position. I am confused.
I have the orginal artwork (created by nivedita) from EPS to SVG, which resulted in rather large paths. This is the resulting SVG image.
First I was planning to use AnimateJS for the animation, but inline SVG animation markup may also do the trick (maybe better).
Reading other SO submissions, I tried rotating gear1 by calculating its center from these coordinates:
X: 42.623
Y: 309.810
Width: 60.796
Height: 60.774
Resulting in following transform:
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" id="gears-of-the-heart" width="333.92" height="526.28">
<g id="canvas" transform="matrix(1.25 0 0 -1.25 0 526.27)">
<g id="heart">
<path d="M58.42 265.7a6.41 6.41 ..." id="gear1" fill="#1e2227">
<animateTransform attributeType="xml" attributeName="transform" type="rotate"
from="0 73.111 340.197" to="360 73.111 340.197" additive="sum" dur="3s" repeatDur="indefinite"/>
</path>
<!-- The other 27 gears here -->
</g>
<!-- More SVG elements (unrelated) -->
</g>
</svg>
Its not working. Is this because of the transform on the parent canvas group?
Two questions:
What am I doing wrong?
Is there an easier way to animate this, so I don't have to calculate center for all gears (I know I could use javascript for coordinates calc)?
Hello I came across a really interesting looking website :
http://digitalbakery.org/
I wonder how did they provide a background image for the animated SVG Path elements?
I have tried to set a background image for SVG before. Did not work. However looking in the DOM I see in fact the images and SVG are entirely separated. The img are in a ul element specified somewhere.
Is the Path element, when hover, has its opacity reduced to zero hence revealing the img underneath? If so I cannot seem to figure out how is the exact location worked out. How can this effect be achieved?
I have used the named clipPath to crop images. The simplest example:
<svg id="pLayout">
<g>
<clipPath id="hex-mask">
<path d="..."></path>
</clipPath>
</g>
<image x="..." y="..." xlink:href="..." **clip-path="url(#hex-mask)"** />
</svg>
Location calculates by container's vertexes.