I've used this tutorial - http://www.netzgesta.de/mapper/ to create an interactive map (http://teamworksdesign.com/clients/neurosign/contact/alabama/), the problem is I want to enlarge it by 10-20% to fill the space a bit better.
I've used these two images:
And the svg:
http://teamworksdesign.com/clients/neurosign/wp-content/themes/default/images/usa_map.svg
Obviously the png is easy enough to enlarge in PS but how can I enlarge the svg whilst keeping all it's coordinates in place?
UPDATE:
Changing this line below on the svg doesn't affect the size of the svg, the hover states just stay the same original size:
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 432 275">
SVG is a vector-format. So if you just change the width and height-attributes on the root-element to 100% each and leave the viewport on the original pixel-values, it will fill the available space while every coordinate is re-calculated by the parser. The sized of the displayed picture now depends on where it is embedded.
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 432 275">
Also, instead using JavaScript for hover-effects, I would use CSS (e.g. polygon:hover { fill: #32cd32; }).
Change the width and height in pixels, but keep the viewBox as it is. For example, to double to size:
<svg width="832px" height="550px" viewBox="0 0 432 275" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
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>
I have an svg file, I keep increasing the stroke-width but it does not change anything:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 487 488" width="487" height="488">
<defs>
<image width="487" height="488" id="img1" stroke-width="1000" href="data:image/png;base64,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"/>
</defs>
<style>
tspan { white-space:pre }
</style>
<use id="Background copy" href="#img1" x="0" y="0"/>
</svg>
Any ideas on how to change the stroke-width?
You're setting the stroke-width attribute for an image element that is embedding an inline PNG. "data:image/png;base64" should be your hint.
Why would you expect this to change anything? The inline png is a bitmap image - just because you embed it in a SVG image element, it doesn't magically convert it to a vector. (And even if it was an inline SVG fragment, the image element doesn't take a stroke-width attribute and that would not propagate down into the data URI).
If you want the stroke in that image to be bigger, extract that inlined PNG into a new .png file and edit it in Photoshop or alternatively redraw the image from scratch with SVG drawing elements (path etc.).
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"/>
I have a windows application ( no source code ) that allows you to import stencils ( SVG ) into a SQL database. From there, the application let's you insert them into a drawing surface. You could have multiple stencils layer on top of each other. If there is any transparency, you should be able to click through to the select the stencil underneath.
There is a stored procedure that runs every so often that changes out stencils for a different version based on certain criteria. I've had issues with distortion going from one stencil's height/width to another's as well as inserted stencils not centering over the stencil it's being layered upon.
I had to figure out a way to solve both problems. What I came up with probably isn't the correct way, but I am no SVG guru. Just setting the height and width of the root svg object in the stencils didn't fix anything, so I added (what I thought was) a transparently filled rect and set the height and width of that to the same value as the root svg object. This way, no matter what the stored procedure switched to, the stencil was guaranteed to be centered.
Everything looked great and I thought I was done. However, the fixed width created a rectangle that had clickable blank space, even though I had set the rect to fill:none;stroke:none;stroke-width:0;; you can't click anything underneath that stencil.
What do I need to do to be able to truly make the stencil respect its height and width on resize while allowing click through on "transparent" blank space to select the stencil underneath?
CodePen
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1"
width="60" viewBox="0 0 60 30" preserveAspectRatio="xMidYMid meet">
<style type="text/css">
<![CDATA[
.st1 {fill:none;stroke:#0000ff;stroke-dasharray:1.2,2.4;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.2}
.st2 {fill:none;stroke:none;stroke-width:0;}
]]>
</style>
<g>
<rect class="st2" height="30" width="60" x="0" y="0" />
</g>
<g>
<path class="st1" d="m 20,15 a 10,10 0 1 1 20,0 10,10 0 1 1 -20,0 z" />
</g>
</svg>
P.S. I seemingly have to use path instead of circle, as the application does not handle the newer version of SVG very well.
I'm even worst at SVG, but would pointer-events:none work for you? This would make the element not accept any mouse events: click, hover, etc.
I'd like to use SVGs as scalable background images (e.g. a rounded rectangular as background of a button). My problem is, that the button size depends on the button content - e.g. its text. Now I need a method to paint my SVG in different sizes and aspects, but with the same line-width and radius.
In my approach I used a SVG with 100% width and height
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg">
<rect id="rect0815" x="0" y="0" width="100%" height="100%" rx="15" ry="15"
fill="red" stroke="#000000" stroke-width="2"/>
</svg>
and rendered it as background:
void paintEvent(QPaintEvent * pEvent)
{
QPainter oPainter( this );
QSvgRenderer oRenderer( QString("../share/images/background.svg") );
oRenderer.render( &oPainter, pEvent->rect() );
}
But this gave me the same distorted result as using a fix-width SVG. Also I tried QSvgRenderer::setViewPort() without any positive effect.
Best regards,
Charly
The line-width request is fairly easy: add vector-effect="non-scaling-stroke" to your SVG:
<rect id="rect0815" vector-effect="non-scaling-stroke" x="0" ... />
I know of no way to prevent the radius scaling apart from recalculating it when the button is first drawn / resized and dynamically updating the SVG. But then that pretty much defeats the point of the SVG; you might as well do the calculations and paint it directly.