I designed a shape in Illustrator and trimmed artboard to shape so no outside white space. I've done this twice to be sure.
When I open it in Chrome and inspect. If I hover over the whole SVG tag it's tight to the shape. If I hover over the path, there's a white space/padding left (and top, actually) - see screenshot.
It means when I place or animate the shape it's not right. I don't know how I can get rid of it - any ideas?
Code:
<div style="margin:100px">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 157.144 210.706">
<path fill="#444" d="M78.394 210.706c-11.247-13.16-22.162-25.304-32.368-38.017-16.016-19.95-30.158-41.092-39.98-64.948-19.25-46.76 9.943-94.135 52.535-105.196 45.651-11.856 91.876 19.016 97.966 65.671 2.028 15.534-1.288 29.968-7.385 44.017-11.15 25.692-27.51 48.023-45.258 69.398-7.965 9.593-16.436 18.766-25.51 29.075zm52.722-131.714c.046-29.268-23.232-52.857-52.283-52.982-28.984-.125-52.775 23.526-52.815 52.506-.041 29.231 23.339 52.858 52.341 52.895 29.291.038 52.712-23.233 52.757-52.419z"/>
</svg>
</div>
It seems Chrome is taking into account the control points when painting the bounding box:
You can avoid this by reordering your control points, and this creates a better shape for your pin:
Here's the Path, but I did it quickly, you might want to redraw it yourself with more care.
<path d="m78.394,211.00938c-11.247,-13.16 -22.162,-25.304 -32.368,-38.017c-16.016,-19.95 -44.72017,-56.5643 -45.74419,-94.98246c-1.02402,-38.41816 32.67117,-77.86771 78.32217,-77.89195c45.651,-0.02424 78.27532,41.16539 78.54978,79.92979c0.27446,38.7644 -35.50176,80.51162 -53.24976,101.88662c-7.965,9.593 -16.436,18.766 -25.51,29.075zm52.722,-131.714c0.046,-29.268 -23.232,-52.857 -52.283,-52.982c-28.984,-0.125 -52.775,23.526 -52.815,52.506c-0.041,29.231 23.339,52.858 52.341,52.895c29.291,0.038 52.712,-23.233 52.757,-52.419z" fill="#444"/>
Related
I'm attempting to add an alpha mask to my SVG file but am having some problems. I couldn't find a way to do it with Illustrator, so instead I used Photoshop to add the alpha layer and resaved it as SVG. Looking at the SVG file itself, I don't see anything that would indicate there's an alpha layer, and I haven't been able to get it to work.
The effect I want is for you to only see the grey layer through the magnifying glass lens, instead it looks like this.
This is my Codepen:
https://codepen.io/TheNomadicAspie/pen/xxdaWOa
And here is the actual raw text of the SVG:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="836" height="1032" viewBox="0 0 836 1032">
<image x="153" y="216" width="530" height="599" xlink:href="data:img/png;base64,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"/>
</svg>
What am I doing wrong?
SVGs don't have a background by default. So you shouldn't need to do anything to make the background areas transparent.
Given that, your statement "I'm attempting to add an alpha mask to my SVG file" doesn't really make much sense. It does not need a mask.
The example SVG you link to consists solely of a bitmap PNG image. But that image has a transparent background so it should work also. By that I mean that whatever you place the SVG in front of, should show through.
Note however that an SVG that consists solely of a bitmap image is pretty much pointless. You would be better just to use that bitmap directly. You are not getting any benefit from putting it inside an SVG file.
Update
Okay, so if you want to create an effect where an image is visible through the lens of your magnifying glass, then your mask image needs to be a circle that matches just the lens size and position, not the whole magnifying glass. In a mask image, white areas represent the part of the image you want to keep, and black areas are the parts you want to be transparent.
Like so.
This is the image that you ought to have had in your SVG.
However as I said, you're wasting the benefits of using an SVG if you just put a single large bitmap in it. You could use a small SVG like the following instead.
<svg xmlns="http://www.w3.org/2000/svg" width="530" height="599">
<!-- areas masked with black become transparent -->
<rect width="100%" height="100%" fill="black"/>
<!-- areas masked with white remain visible -->
<circle cx="170" cy="170" r="165" fill="white"/>
</svg>
Your main magnifying glass isn't suitable as a mask, but it can be used as an image to be superimposed over the masked background. But again, that image could be a proper SVG (using vector shapes instead of a bitmap) and it would be a lot smaller.
But if you are going to use SVGs it would be simpler to use an SVG for the whole thing. Especially if you are planning to move the lens about.
The mask-image property has some restrictions, and can be tricky to use.
Here's an example of doing it entirely within an SVG.
svg {
width: 530px;
height: 599px;
}
<svg viewBox="0 0 530 599">
<defs>
<!-- Our circular lens mask -->
<mask id="lens-mask">
<!-- areas masked with black become transparent -->
<rect width="530" height="599" fill="black"/>
<!-- areas masked with white remain visible -->
<circle cx="170" cy="170" r="165" fill="white"/>
</mask>
</defs>
<!-- Background image that we want to show through the lens -->
<image xlink:href="https://placekitten.com/530/599" width="530" height="599"
mask="url(#lens-mask)"/>
<!-- Magnifying glass image that we will lay directly over the top -->
<image xlink:href="https://i.stack.imgur.com/dvbYR.png" id="mag-glass"/>
</svg>
Update 2
I didn't add any movement to my last example, because you hadn't mentioned it in your question. I didn't want to complicate the example by adding unnecessary extras.
Here's an updated version which includes movement. Hopefully this helps.
var svg = document.getElementById("my-svg");
var magGlass = document.getElementById("mag-glass");
var lensCircle = document.querySelector("#my-svg #lens-mask circle");
svg.addEventListener("mousemove", moveLens);
function moveLens(evt) {
var mouseTransform = "translate(" + (evt.offsetX - 170) + "," + (evt.offsetY - 170) + ")";
lensCircle.setAttribute("transform", mouseTransform);
magGlass.setAttribute("transform", mouseTransform);
}
svg {
width: 530px;
height: 599px;
overflow: visible;
}
<svg viewBox="0 0 530 599" id="my-svg">
<defs>
<!-- Our circular lens mask -->
<mask id="lens-mask">
<!-- areas masked with black become transparent -->
<rect width="530" height="599" fill="black"/>
<!-- areas masked with white remain visible -->
<circle cx="170" cy="170" r="165" fill="white"/>
</mask>
</defs>
<!-- Background image that we want to show through the lens -->
<image xlink:href="https://placekitten.com/530/599" width="530" height="599"
mask="url(#lens-mask)"/>
<!-- Magnifying glass image that we will lay directly over the top -->
<image xlink:href="https://i.stack.imgur.com/dvbYR.png" id="mag-glass"/>
</svg>
struggling with issue how to set background image - static or SVG shape for top right corner in way it's pulled from outside of view area.
Imagine you have site with minimal width ~ 1000 px - image is clipped in top right corner partially. When width of page will grow to max width image will be unclipped / unmasked fully.
There is no scale in size of image. Just horizontal clipp / mask - attached screenshots might give such impression but it's just because of different scale while making print screen.
Image in top left stays all the time. Red rectangle represents page area.
Top right image is like
<svg width="1868" height="899" viewBox="0 0 1868 899" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1044.32 -1144.66L1757.62 -735.936C1825.92 -696.799 1868 -624.454 1868 -546.161V271.161C1868 349.454 1825.92 421.799 1757.62 460.936L1044.32 869.66C976.052 908.78 891.948 908.78 823.677 869.66L110.379 460.936C42.0777 421.799 0 349.454 0 271.161L0 -546.161C0 -624.454 42.0777 -696.799 110.379 -735.936L823.677 -1144.66C891.948 -1183.78 976.052 -1183.78 1044.32 -1144.66Z" fill="#17212F"/>
</svg>
Any ideas?
Kind Regards,
Jan
My use case is probably a bit unique, but I am creating a dynamically-sized square grid using DOM elements encased in a flexbox. Each DOM element has an SVG image background and a height/width equal to calc(100vmin / <gridSize>). The SVG elements are simple:
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<path stroke-width="2" stroke="#000" stroke-linecap="square" d="M0,50 h100 M50,0 v50"/>
</svg>
However, I noticed that some lines appear darker than others, and there are gaps between some SVG lines. (See picture below) I'm assuming this is due to pixel rounding because when I resize the browser, the gaps and thicknesses jump around.
I tried to round the pixels from the calc, but I am using styled-components so I am unable to use SASS / LESS functions like floor / ceil. I also noticed making the stroke width thicker alleviates the problem, but I would prefer to keep my lines thin.
Are there other ways I can make the lines consistent?
It's antialiasing. Setting shape-rendering="crispEdges" will turn it off on most UAs.
vector-effect='non-scaling-stroke'
non-scaling-stroke
This value modifies the way an object is stroked. Normally stroking involves calculating stroke outline of the shapeʼs path in current user coordinate system and filling that outline with the stroke paint (color or gradient). The resulting visual effect of this value is that the stroke width is not dependent on the transformations of the element (including non-uniform scaling and shear transformations) and zoom level.
MDN web docs
I have a rectangle and some text within it. The entire rectangle and the text within it is clickable, and opens a new web page when clicked.
I need to use styling within my SVG document such that, when I move the mouse over the text or the rectangle, it should show a border around the rectangle. Because everything in the box is clickable, the <path> and <text> elements are within an <a> element. So, if a do something like this, I get a border around the path as well as the text.
<style type="text/css">
<![CDATA[
a:hover
{
stroke:#26a9e0
}
]]>
</style>
How can I get border just around the box, even when the mouse is moved over path or text?
Edit: This is an edit to the original question that was originally posted as an answer by the OP
Thanks for the response. Putting in more code here for clarity
<a aria-labeledby="itemTitle" cursor="pointer" xlink:href="http://some-link" target="_blank">
<path id="path3856" fill-rule="evenodd" fill="#26a9e0" d="m808.52,167.06,0,58.146,3.7936,0,0-58.146-3.7936,0z"/>
<path id="path3858" fill-rule="evenodd" fill="#FFF" d="m811.83,167.06,0,58.146,172.16,0,0-58.146-172.16,0z"/>
<text id="text3860" style="text-anchor:start;text-align:start;" font-weight="normal" xml:space="preserve" font-size="17.65748024px" font-style="normal" y="191.36598" x="822.92633" font-family="Segoe UI" fill="#000000">Some Text</text>
</a>
So, you can see that I have which includes and . The effect I need is to have a border around the box, which is denoted by in the code. The important thing is that border should show both on moving the mouse over the shape as well as text. So, if do what you suggested, i get the border on the rectangle only when the mouse is on the rectangle. If i move it over the text in the rectangle, the border goes away.
To fix this, if I do
a:hover
{
stroke:#26a9e0;
}
I see the border on the box as well as the text when I move the mouse over it.
This is a little tricky to explain, i know. I hope I am making myself clear.
It's hard to tell from your code, as it's incomplete (e.g. need to see the rectangle), but I suspect what you need is to use the rect element instead of the a element. Currently you're setting the stroke color when on an a, try this instead:
rect:hover
{
stroke:#26a9e0
}
Of course, it would be better to me more specific (this would affect all rectangles) so you'd want to make it a particular class (say glow) and use rect.glow instead of just rect.
I've been messing with this for weeks, so I'm just gonna flat out ask how to do it.
I've been working on a little SVG countdown clock just for the hell of it. But when I try and position things relative to how the page might be sized, I get stuck. I can't seem to size text tags relative to the page, and I can't find a way to put them into a group for sizing.
I've tried putting them into symbol tags, and using viewBox, but I can't seem to get that to work either.
My intended goal is to have this working on any sized screen from monitors to smartphones. So I wanted to do something with a min, and max width/height, or something along those lines, and apply it to a combination of the number and it's associated label. So I would have one group for days with both the number of days(being changed by the script), and then the word "days" underneath it.
Here is what I'm working with if it helps:
http://jsfiddle.net/2P9qV/
Does anyone have any ideas? I've been stumped for weeks.
Ok, so I finally figured it out. Luckily, I was able to use multiple SVGs within an SVG to create content, and then display it using use tags.
So I had each set as part of it's own symbol in defs. From there, I used the viewBox on the symbol tag to limit the draw space to the exact width and height of the content created, which I found by inspecting the element, and using the height and width it had been made as(without the 'px'). This way, I could center the whole set in the SVG that had the use tag, then set the width of the SVG to 100%, and the height to the percentage I wanted to scale it to. Since these are set as percentages, the page will limit the SVG's size to whichever is most limiting, while still maintaining scale, so it won't skew.
So one of the symbols would be:
<symbol id="daysSymbol" viewBox="0 0 110 156">
<g>
<text id="days" y="0" x="50%" font-size="100" class="time big">00</text>
<text id="daysT" y="100" x="50%" font-size="40" class="text bigText">DAYS</text>
</g>
</symbol>
and the SVG for this would be
<svg id="daysSVG" height="50%" width="100%" y="30%">
<use xlink:href="#daysSymbol" height="100%"/>
</svg>
It also let me get creative with how I managed the contents on the page. As something happened, I was able to dynamically remove content, and scale other elements to take up the new space.
For those curious, here is the final product
https://hostr.co/file/PLCY7lodb7Lk/xboxCountdown.svg
It won't last for that long, since it was a countdown clock. But I won't take it down(as long as it doesn't get automatically deleted), and if you wanted to see how it worked, you cold just download it and change the date it counted down to.