I am trying to make a resizable window within SVG, in which I want to have little indicators where the window can be dragged to resize it. I've currently got the following:
<svg width="300" height="200">
<rect x="25" y="25" width="150" height="100" fill="none" stroke="black" stroke-width="2" stroke-dasharray="5,5" />
<g fill="white" stroke="black" stroke-width="1">
<rect x="23" y="23" width="5" height="5" style="cursor:nw-resize" />
<rect x="173" y="23" width="5" height="5" style="cursor:ne-resize" />
<rect x="173" y="123" width="5" height="5" style="cursor:se-resize" />
<rect x="23" y="123" width="5" height="5" style="cursor:sw-resize" />
</g>
</svg>
but if I want to resize that, I'd have to update three of the <rect>s whenever one of the corners is being resized, or if I would add squares in the middle of the line (like what MS Paint uses), I'd have to update 5 at a time.
So is it possible to position these four boxes relative to a parent <g>? That way I would only have to resize the one <g>'s width and height to automatically move all of the <rect>s. It seems to me this kind of thing (grouping SVG elements together) is what the <g> tag was invented for, but I couldn't find anything on how to do what I want to do here.
<svg> elements nest so stick what you want to resize in an inner <svg> element and alter its viewBox
The viewBox defines the area visible within an element so if you make it bigger the contents will appear smaller and vice versa.
Related
I'm trying to create a background for my divs which is like a rectangle (with rounded corners) but with the right corner lower than the left one. The height difference between those two corners must remain the same independently of the total height of the background.
Something like that :
I don't know which solution is the best : a full svg, or working only with clip-path in my css.
I tried to create manually an svg but the result seems not enough precise.
<svg width="500" height="200">
<defs>
<mask id="roundCorner">
<rect width="100%" height="100%" fill="white"/>
//left corner
<rect width="50" height="50" fill="black"/>
<circle r="50" cx="50" cy="50" fill="white"/>
//right corner
<rect x='450' y="25" width="50" height="50" fill="black"/>
<circle r="50" cx="450" cy="76" fill="white"/>
//line
<path d="M50 0 L500 30 L500 0 Z" fill='black' />
</mask>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="lime" mask="url(#roundCorner)"/>
</svg>
So how can I achieve a clean background like this in an efficient way ?
I define a svg <pattern> like this:
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="circles-1_4" patternUnits="userSpaceOnUse" width="10" height="10">
<image xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIxMHB4IiBoZWlnaHQ9IjEwcHgiIHZpZXdCb3g9IjAgMCAxMCAxMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTAgMTAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxjaXJjbGUgY3g9IjEuMjUiIGN5PSIxLjI1IiByPSIxLjI1Ii8+PHJlY3QgZmlsbD0ibm9uZSIgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIi8+PC9zdmc+"
x="0" y="0" width="10" height="10">
</image>
</pattern>
</defs>
</svg>
visually, this is the equivalent of this:
So then I call my css for svg as a fill like this:
svg #VISUEL-3 * {fill: url(#circles-1);}
I get a pretty good result:
But when I display my graphic smaller (1/4 in this i.e), the fill adapt like this
It's difficult to see on the screenshots because the scale is broken due to the width 100% of stackoverflow but the vector-effect:non-scaling-stroke works perfectly so the strokes have the same size between the first and the second screenshot and the number "1,2,3,4,5,6" as well.
So as you can see the fill has adapted...
Is it possible to keep the same pattern size (same size of dots) like in css? That look messy visually when I have two graphics that are not of the same size and are next to each other.
Is my method right to obtain that? (I'm ready to change my method..)
The pattern elements are applied to the referencing element before transformations on the element or one of its parents are applied - so the pattern size gets transformed as well. The only way to counteract this is to write a seperate pattern element for each scale you us it at, including a patternTransform with the inverse scale. Fortunately, there is a mechanism for cloning patterns with a xlink:href attribute.
.simple {
fill: url(#dots);
}
.quarter {
fill: url(#quadrupleDots);
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="150">
<defs>
<pattern id="dots" patternUnits="userSpaceOnUse" width="10" height="10">
<circle r="1.25" cx="1.25" cy="1.25" />
</pattern>
<pattern id="quadrupleDots" xlink:href="#dots" patternTransform="scale(4)" />
</defs>
<rect id="shape" class="simple" x="20" y="20" width="100" height="100" />
<rect class="quarter" x="800" y="80" width="100" height="100" transform="scale(0.25)" />
</svg>
I'm trying to work out a simple svg example - creating bar graph.
However, I don't have clear grasp of how it works. I rotated an existing graph
upside down but seems like there is a small offset. Corresponding jsfiddle here - http://jsfiddle.net/rhvP8/2/
<div style="width:300px;height:300px;">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:100%;height:100%" viewBox="0 0 300 300">
<g>
<rect width="14.55" height="40%" x="0" y="0" fill="black"></rect>
<rect width="14.55" height="20%" x="50" y="0" fill="green"></rect>
<rect width="14.55" height="80%" x="100" y="0" fill="red"></rect>
<rect width="14.55" height="90%" x="150" y="0" fill="yellow"></rect>
<rect width="14.55" height="10%" x="200" y="0" fill="pink"></rect>
<rect width="14.55" height="60%" x="250" y="0" fill="orange"></rect>
</g>
</svg>
</div>
<div style="width:300px;height:300px;">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:100%;height:100%" viewBox="0 0 300 300">
<g transform="rotate(180)">
<rect width="14.55" height="40" x="-50" y="-300" fill="black"></rect>
<rect width="14.55" height="20" x="-100" y="-300" fill="green"></rect>
<rect width="14.55" height="35" x="-150" y="-300" fill="red"></rect>
<rect width="14.55" height="90" x="-200" y="-300" fill="yellow"></rect>
<rect width="14.55" height="10" x="-250" y="-300" fill="pink"></rect>
<rect width="14.55" height="60" x="-300" y="-300" fill="orange"></rect>
</g>
</svg>
</div>
The thing you need to remember is that the rotate() transform will rotate an object about the coordinates (0,0), which in this case is the top left corner of the graph. Since the graph is 300p wide and 300px tall, rotating through 180° causes the graph to spin off beyond the top left corner. A translate transform can be used to readjust the coordinates so that the drawing appears within the viewbox again. Hopefully this illustration will explain:
Here's an updated JSfiddle with a few other fixes: http://jsfiddle.net/rhvP8/4/
An alternative to squeamish's solution is just to use the version of rotate that takes the rotation origin as well: rotate(angle x y).
Since you know your graph is 300x300, using rotate(180 150 150) works fine.
Demo here
Easy way: the scaleY() CSS function, defines a transformation that resizes an element along the y-axis (vertically).
svg {
transform: scaleY(-1);
}
View browser compatibility here: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scaleY()#browser_compatibility
I have several svg rectangles with an hover effect, the background-color of the rectangles gets changed when the mouse is over them. The hover effect is set via css:
.myclass:hover {
fill: rgb(255,128,0);
}
Apart from that, text is placed above each of the rectangles. A pair of text and rectangle define a group.
<g>
<rect class="myclass" x="10" y="10" width="40" height="40" />
<text x="30" y="40" font-family="Verdana" font-size="10" fill="blue">ESC</text>
</g>
The hover effect works fine, but only if the cursor is not exactly above the text. If it is exactly above the text, then the hover effect vanishes.
How could I fix that?
Here a screenshot: on the left you can see the hover effect (background is orange), on the right you can see how the effect vanishes if the cursor hits the text on the rectangle:
Thank you
You need to make the text have pointer-events="none" so that it's ignored by the hover.
<g>
<rect class="myclass" x="10" y="10" width="40" height="40" />
<text x="30" y="40" font-family="Verdana" font-size="10" fill="blue" pointer-events="none">ESC</text>
</g>
The problem is the hover is assigned to element that sits behind the text. So when you're hovering over the text, you're technically NOT touching the background anymore.
My suggestion would be to apply the class to the parent element, and assign the hover to that.
<g class="myclass">
<rect x="10" y="10" width="40" height="40" />
<text x="30" y="40" font-family="Verdana" font-size="10" fill="blue">ESC</text>
</g>
Now your CSS would look like this, to target the child "rect" element:
.myclass:hover rect {
fill: rgb(255,128,0);
}
I am trying to create an SVG graph with a fixed width to the left for the x axis labels and then a variable width to fill the remaining space for the actual graph results. The image below shows what I am trying to achieve. Thus far I have been unable to work out how to create the fixed width and variable width area.
Any help with this would be much appreciated!
Many thanks.
I would nest a couple of SVG elements inside your main like so:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500px" height="500px" >
<svg width="100">
<rect x="0" y="0" width="100%" height="100%" fill="red" />
</svg>
<svg x="100" >
<rect x="0" y="0" width="100%" height="100%" fill="blue" opacity="0.5"/>
</svg>
</svg>
NOTE I made the blue SVG element translucent so you can see that none of the red SVG was behind it.
I would also recommend using viewBox to give you more control over your drawing...
EDIT:
OK then I need to ask you a question about aspect ratios. If you take a square (width = height) and chop off a fixed portion from ONE side you no longer have a square and you have to think about what that means to your graph.
I believe this SVG will demonstrate more or less what you want:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="600px" height="500px" viewBox="0 0 1200 1000">
<svg width="200">
<rect x="0" y="0" width="100%" height="100%" fill="red" opacity="0.5"/>
</svg>
<svg x="200" width="1000" height="1000" viewBox="0 0 100 100">
<rect x="0" y="0" width="100%" height="100%" fill="blue" opacity="0.5"/>
<rect x="80%" y="10%" width="10%" height="50%" fill="green"/>
<rect x="10" y="10" width="70" height="40" fill="gray"/>
</svg>
NOTE the aspect ratio (AR) of the outermost SVG's dimensions MUST match the outermost viewBox's AR but can have different values. Likewise for the second inner SVG, but now you are dealing with a slice of the total that is a true square and not a rectangle. You can vary the width and height of the outer most SVG and so long as you maintain the same AR all the code on the inside will not have to change - it will all scale automajically :)
Also note the different scales in use and the different value types I used for co-ordinates. Because my second inner SVG's viewBox set the user co-ordinates to 100 X 100, 10% and 10 amount to the same thing...
You could also set the preserveAspectRatio="none" or some other value to achieve different effects but for a graph I kinda think lining things up is important so I wouldn't.
One final note - you could (and in your case should) omit the viewBox on the inner SVG. That way the scale is consistent on all parts of your graph. I was just showing off the power of viewBox :)
It just occurred to me that you may prefer a rectangle to a square so here is a code sample for that:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="800px" height="400px" viewBox="0 0 1600 800" >
<svg width="200">
<rect x="0" y="0" width="100%" height="100%" fill="red" opacity="0.5"/>
</svg>
<svg x="200" width="1400" height="800" viewBox="0 0 175 100" >
<rect x="0" y="0" width="100%" height="100%" fill="blue" opacity="0.5"/>
<rect x="80%" y="10%" width="10%" height="50%" fill="green"/>
<rect x="10" y="10" width="70" height="40" fill="gray"/>
</svg>
NOTE the width of the inner SVG is set to 175 so that the aspect ratio of 1400/800 is maintained.