I have the text with textContent "Design" and text-anchor as start, that was transformed with css to be rotated 45 degree. so it get rotated. problem is that i need to adjust the (x,y)position of the text after my rotation to display the text between the tick as shown in the Expected figure. How can i achieve this.
Result:
http://imageshack.us/content_round.php?page=done&l=img404/2711/result1h.png
Expected:
http://imageshack.us/content_round.php?page=done&l=img266/5138/expected1.png
<svg>
<text x="100" y="100" width="64" height="16" fill="black" transform="rotate(45,100,100)" text-anchor="start">Design</text>
</svg>
Thanks
Gowri
The text needs to be centered horizontally and vertically so rotation won't move it:
<text x="100" y="50" text-anchor="middle"
dominant-baseline="central" transform="rotate(0, 100, 50)"></text>
text-anchor aligns the text horizontally
dominant-baseline aligns the text vertically
svg {
width: 200px; height: 100px;
text-align: center;
border: solid 1px blue;
font-family: monospace;
}
<svg>
<text x="100" y="50" text-anchor="middle" dominant-baseline="central" transform="rotate(180, 100, 50)">
Hello World
</text>
<text x="100" y="50" text-anchor="middle" dominant-baseline="central" transform="rotate(0, 100, 50)">
Hello World
</text>
</svg>
example: http://jsfiddle.net/e4bAh/131/
use transform="rotate(45, cx, cy)"
Where cx, cy are the co-ordinates of the center of screen (or rotation).
This is a good example
Related
I have found a difference between how Firefox and Chrome handle clicking near an image that I need to fix. I have a rect with an image occupying roughly the top 65%. I preserve the aspect ratio of the image and so it appears narrower than the full rect, which is perfect for what I need.
However, when I click near to the image, in the margin space either side of it, Firefox says I have clicked on the rect whereas Chrome says that I have clicked on the image. Inspecting the elements, I see that the image element spans the full width of the rect in both cases, but it is the functionality in Firefox that I need (as though I'm clicking "through" those image margins).
This is better explained with an example. The code below shows one rect and a narrow image in the top 65%. If I click either side of the image in Firefox, it says that the event.target.nodeName is "use" (I have the rect in a <g>) whereas Chrome says it is "image".
function clickHandler(ev) {
ev = ev || window.event;
alert (ev.target.nodeName);
}
text {
text-anchor: middle;
font-size: 10px;
font-weight: bold;
font-family: "Times New Roman";
pointer-events: none;
}
.m {
stroke: dimgray;
stroke-opacity: 1.0;
stroke-width: 1.5;
fill-opacity: 1.0;
fill: white;
}
<svg id="TreeTest" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<g id="G-Box">
<rect width="80" height="80" rx="5" ry="5"/>
</g>
</defs>
<g id="HenryProctor">
<use tabindex="0" xlink:href="#G-Box" class="m" x="50" y="50" onclick="clickHandler(evt);">
</use>
<text x="90" y="106" dy="1em">Henry</text>
<text x="90" y="106" dy="2em">Proctor</text>
<image x="52.5" y="52.5" width="75" height="51.5" xlink:href="https://parallaxviewpoint.com/Images/Proctor_Henry_b1833.jpg" preserveAspectRatio="xMidYMin meet" onclick="clickHandler(evt);">
</image>
</g>
</svg>
Is there a way to detect when the click was only on the visible part of the image?
[Edited for clarification] I need to distinguish between a click on the visible image and a click anywhere else in the rect. I have my event handler on both, but the action it takes depends on knowing what the user clicked on.
That difference is an interesting quirk that I hadn't noticed before.
Although Firefox's behaviour seems the most useful in this case, I think that Chrome's behaviour follows the spec more accurately. The blank areas on each side of the image are still technically part the "fill" of the <image> element. So clicking there probably should return the "image".
Do you care whether the user clicks on the visible part of the image, or the blank areas beside it? If not, then you could just tell the browser to ignore all click events on the <image> element using:
pointer-events="none"
Now when you click anywhere on the image, in Chrome, you get "use".
function clickHandler(ev) {
ev = ev || window.event;
alert (ev.target.nodeName);
}
text {
text-anchor: middle;
font-size: 10px;
font-weight: bold;
font-family: "Times New Roman";
pointer-events: none;
}
.m {
stroke: dimgray;
stroke-opacity: 1.0;
stroke-width: 1.5;
fill-opacity: 1.0;
fill: white;
}
<svg id="TreeTest" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<g id="G-Box">
<rect width="80" height="80" rx="5" ry="5"/>
</g>
</defs>
<g id="HenryProctor">
<use tabindex="0" xlink:href="#G-Box" class="m" x="50" y="50" onclick="clickHandler(evt);">
</use>
<text x="90" y="106" dy="1em">Henry</text>
<text x="90" y="106" dy="2em">Proctor</text>
<image x="52.5" y="52.5" width="75" height="51.5" xlink:href="https://parallaxviewpoint.com/Images/Proctor_Henry_b1833.jpg" preserveAspectRatio="xMidYMin meet" onclick="clickHandler(evt);"
pointer-events="none">
</image>
</g>
</svg>
SVG content is in shadowDOM, so you can use evt.composedPath() to get the whole Event path.
evt.composedPath()[0] is the Element you clicked.
SO snippets have some delay issues with this; outputting errors in the console, and after a minute the wrong info in the attached SO snippet console.
Update
Argh! OP wants IE support (its 2021, even Microsoft says not to use IE)
For those who want a modern solution with native Web Components, where the IMG is read, and its naturalWidth and naturalHeight are used to generate SVG from a Template
See JSFiddle: https://jsfiddle.net/WebComponents/qv1n9khf/
<person-card img="https://www.gravatar.com/avatar/..."></person-card>
<person-card img="https://www.gravatar.com/avatar/..."></person-card>
Included here is an image of the svg file (could not upload svg file)
I would like to hover mouse over, and radiantly change background (to blue) only of the circle, from the inner circle to the edges, as an animation.
Even better if the animation was kind of wobbling effect from the middle of the circle and outwards. Nice if it was kind of "random" looking, the blue wobbling effect. Important it's animating from the middle of the circle, out towards the edge until the whole circle is blue.
When mouse/hover is removed then the animation is backwards.
Is that possible in svg/css land and can someone point towards the right direction?
This is a slightly hacky way to do it, using a blue circle with a black stroke that starts so thick it fills its interior. Hovering over the circle causes the stroke to shrink to nothing.
.logo-background {
fill: blue;
stroke: black;
stroke-width: 200;
transition: stroke-width 500ms;
}
.logo-background:hover {
stroke-width: 0;
}
.logo {
fill: none;
stroke: white;
stroke-width: 5;
pointer-events: none;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 200" height="100px">
<defs>
<clipPath id="circle-clip">
<circle cx="100" cy="100" r="100" />
</clipPath>
</defs>
<circle class="logo-background" cx="100" cy="100" r="100" clip-path="url(#circle-clip)" />
<rect class="logo" x="60" y="60" width="80" height="80" rx="5" ry="5"/>
</svg>
I'm trying to render text along a curved path in an SVG. It renders as expected in Chrome, Safari, and Edge, but it renders differently in Firefox.
jsfiddle: http://jsfiddle.net/hLyq1ug6/
<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background: blue"><path d="m57.8,160 a102.2,102.2 0 1 1 204.4,0" fill="red" id="curvedTextPath5cf008a181659"></path><text x="160" y="185.5" style="fill: #ffffff; font-size: 35pt"><textPath xlink:href="#curvedTextPath5cf008a181659" startOffset="0" text-anchor="middle">Hello</textPath></text></svg>
Expected:
Firefox:
Per the SVG specification
When the inline-base direction is horizontal, then any ‘x’ attributes on ‘text’ or ‘tspan’ elements represent new absolute offsets along the path, thus providing explicit new values for startpoint-on-the-path.
It seems only Firefox does this correctly.
I've removed the x and the y attributes from the text. If you need to offset the text use startOffset="50%"I hope it helps.
<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background: blue">
<path d="m57.8,160 a102.2,102.2 0 1 1 204.4,0" fill="red" id="curvedTextPath5cf008a181659"></path>
<text style="fill: #ffffff; font-size: 35pt">
<textPath xlink:href="#curvedTextPath5cf008a181659" startOffset="50%" text-anchor="middle">Hello</textPath>
</text>
</svg>
I have a svg with some circles that should get bigger on hover, here is a snippet
!This will not work in Firefox
var svgRoot = $('.svg-root')[0];
$('.bubble').mouseover(function (e) {
svgRoot.append(e.currentTarget);
});
circle{
transition: all 200ms;
}
circle:hover{
stroke: black;
fill: white;
transform: scale(3);
}
.svg-root svg{
overflow: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg class="svg-root">
<svg class="bubble" x="50" y="50">
<circle r="10"></circle>
</svg>
<svg class="bubble" x="70" y="70">
<circle r="10"></circle>
</svg>
<svg class="bubble" x="90" y="50">
<circle r="10"></circle>
</svg>
</svg>
To avoid the other circles overlapping the one the mouse is currently hovering over, I used the append trick. That solves the z-index Problem, but it causes a different one. It seems that after appending the node, Firefox does not recognize the hover state of the cursor. The circles will not scale on hover in Firefox, but they will in Chrome.
I need them to scale on hover and to have the highest z-index while doing so.
Any solutions?
I have a light gray SVG button in a label with black background. The SVG button seems 'blurry' / 'bolder' on the edges. This is not something I can notice when using a white background.
I suppose it is related to the high contrast between background and asset colour.
How can I get this better?
Btw, I'm using the SVG has background image of a div and respecting the original size of image.
CSS code of the div containing the SVG asset:
position: absolute;
z-index: 2;
width: 42px;
height: 42px;
padding: 0px;
border: 0px;
top: 20px;
right: 20px;
background-image: url(/assets/images/icons/create-document-close-button.svg);
background-repeat: no-repeat;
background-color: transparent;
background-size: 36px 36px;
background-position: center center;
transition: all 100ms ease-in-out;
The SVG code:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="36px" height="36px" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs></defs>
<g id="States" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Buttons-&-States-(Documents-Steps)" transform="translate(-104.000000, -138.000000)">
<g id="Close-Button" transform="translate(104.000000, 138.000000)">
<g>
<circle id="circle" fill="#E9EEF2" cx="18" cy="18" r="18"></circle>
<polygon id="X" fill="#9FADB5" transform="translate(17.868000, 17.808000) rotate(-45.000000) translate(-17.868000, -17.808000) " points="16.968 23.616 18.768 23.616 18.768 18.672 23.736 18.672 23.736 16.944 18.768 16.944 18.768 12 16.968 12 16.968 16.944 12 16.944 12 18.672 16.968 18.672"></polygon>
</g>
</g>
</g>
</g>