I have an svg shape which uses a pattern. I want the pattern to NOT scale when i scale the shape.
Here's a fiddle with a minimal example, the bigger circle should show the pattern like the smaller one:
http://jsfiddle.net/cTMrQ/6/
<svg style="position: absolute" width="100%" height="100%" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events">
<defs>
<pattern id="checkerPattern" patternUnits="userSpaceOnUse" x="0" y="0" width="4" height="4">
<image x="0" y="0" xlink:href="http://inwonderland.at/new/lines.png" width="4" height="4" />
</pattern>
<circle fill="url(#checkerPattern)" id="c" cx="50" cy="50" r="50" />
</defs>
<use x="100" y="100" xlink:href="#c" />
<use x="200" y="100" xlink:href="#c" transform="scale(2)" />
</svg>
In the end the shape will be a complex path and the image in the pattern will be a scan of a piece of paper, so just drawing a bigger circle instead of scaling it won't work.
Update
To clarify what i want, here are two images:
this is what it looks like, no matter what i try, when i scale the shape:
http://inwonderland.at/new/ihave.png
this is what i want:
http://inwonderland.at/new/iwant.png
i want the background image (bitmap image) to always have its natural size.
You can't get what you want using a pattern, the transform always happens after the fill, and you can't just move the pattern fill into a wrapper either. My suggestion is to use a filter and apply the filter on a wrapper - like so:
<svg style="position: absolute" width="100%" height="100%" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events">
<defs>
<circle fill="url(#checkerPattern)" id="c1" cx="50" cy="50" r="50" />
<filter id="linepattern" x="0%" y="0%" height="100%" width="100%">
<feImage xlink:href="http://inwonderland.at/new/lines.png" result="pattern" width="4" height="4"/>
<feTile/>
<feComposite operator="in" in2="SourceGraphic"/>
</filter>
</defs>
<use filter="url(#linepattern)" x="100" y="100" xlink:href="#c1" />
<use filter="url(#linepattern)" x="200" y="100" xlink:href="#c1" transform="scale(2)" />
<g filter="url(#linepattern)">
<use x="50" y="100" xlink:href="#c1" transform="scale(2)" />
</g>
</svg>
Using viewport
1:1 no zoom
<svg width="800" height="400" viewBox="0 0 800 400">
2:1 zoom double size
<svg width="800" height="400" viewBox="0 0 400 200">
The following elements can use the viewBox attribute
<svg>
<symbol>
<image>
<marker>
<pattern>
<view>
viewbox is fully animatable; and you can zoom into any center point.
<animate attributeName="viewBox" begin="1s" dur="1s"
values="0 0 600 400; 250 180 300 200" fill="freeze" />
Transform a parent tag
Yes an SVG can be a child element but more commonly shapes made with multible tags are placed inside a group tag.
Transform scale can be used with tags which are parents IE the group tag.
<g transform="scale(1.5)">
/* draw your shape inside the g tag */
<use x="100" y="100" xlink:href="#c" />
<use x="200" y="100" xlink:href="#c" />
</g>
So using your above example scale the shape in a parent tag.
Update
To scale image but not patterns in other words move patterns, or icons, on background image that scales.
<g transform="scale(2)">
/* draw your shape inside the g tag */
<use x="100" y="100" xlink:href="#c" transform="scale(.5)" />
<use x="200" y="100" xlink:href="#c" transform="scale(.5)"/>
</g>
Update full svg
I had to move things around a bit, One full size, (lets call it a map), with an overlay of 1 half size map in the upper left corner. setting the full screen to render between 0 and max of 600. Setting a viewport the same but with the width set to 300 scales it down. I do need to double the radius for this example of scaling.
<svg viewBox="0 0 600 600" style="position: absolute" width="100%" height="100%" version="1.1" baseProfile="full"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events">
<defs>
<pattern id="checkerPattern" patternUnits="userSpaceOnUse" x="0" y="0" width="4" height="4">
<image x="0" y="0" xlink:href="http://inwonderland.at/new/lines.png" width="4" height="4" />
</pattern>
<circle fill="url(#checkerPattern)" id="c" cx="50" cy="50" r="50" />
<circle fill="url(#checkerPattern)" id="c2" cx="50" cy="50" r="100" />
</defs>
<use x="100" y="100" xlink:href="#c" transform="scale(.5)"/>
<use x="200" y="100" xlink:href="#c" transform="scale(1)"/>
<rect width="600" height="600" style="fill: none; stroke: black;" />
<svg viewBox="0 0 600 600" width="300" height="300" x="300">
<use x="100" y="100" xlink:href="#c2" transform="scale(.5)"/>
<use x="200" y="100" xlink:href="#c2" transform="scale(1)"/>
<rect width="600" height="600" style="fill: none; stroke: black;" />
</svg>
</svg>
This example is scaled using the same circle pattern. The radius does not need to be changed here because the location is not in the tag being scaled. I'm making use of svg tags here but other tags can be used.
<svg viewBox="0 0 600 600" style="position: absolute" width="100%" height="100%" version="1.1" baseProfile="full"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events">
<defs>
<pattern id="checkerPattern" patternUnits="userSpaceOnUse" x="0" y="0" width="4" height="4">
<image x="0" y="0" xlink:href="http://inwonderland.at/new/lines.png" width="4" height="4" />
</pattern>
<circle fill="url(#checkerPattern)" id="c" r="50" cx="50" cy="50" />
</defs>
<svg x="100" y="100"><use xlink:href="#c" transform="scale(.5)"/></svg>
<svg x="200" y="100"><use xlink:href="#c" transform="scale(1)"/></svg>
<rect width="600" height="600" style="fill: none; stroke: black;" />
<svg viewBox="0 0 600 600" width="300" height="300" x="300">
<svg x="100" y="100"><use xlink:href="#c" transform="scale(1)"/></svg>
<svg x="200" y="100"><use xlink:href="#c" transform="scale(2)"/></svg>
<rect width="600" height="600" style="fill: none; stroke: black;" />
</svg>
</svg>
Related
I created the pattern, then gave it to the circle inside the . clipPath I set to the image, but the pattern was not set for the image. How can I set a mask as a pattern for an image?
I was expecting to see a mask for the image in the form of a created pattern
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
<pattern id="cube" x="0" y="10" width="20" height="20" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="10" height="10" />
<rect x="10" y="10" width="10" height="10" />
</pattern>
<clipPath id="msk1">
<circle fill="url(#cube)" cx="50%" cy="50%" width="100%" height="100%" r="200" />
</clipPath>
<image xlink:href="wave.jpg" height="100%" clip-path="url(#msk1)"/>
</svg>
If you want a mask, then use a <mask>, not a <clipPath>, which as its name implies will create a clipping area from a path. What you want is for the pixels to create the mask, and that's what a <mask> does.
svg { max-height: 100vh }
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 600 600">
<pattern fill="white" id="cube" x="0" y="10" width="20" height="20" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="10" height="10" />
<rect x="10" y="10" width="10" height="10" />
</pattern>
<mask id="msk1">
<circle fill="url(#cube)" cx="50%" cy="50%" width="100%" height="100%" r="200" />
</mask>
<image xlink:href="https://picsum.photos/400/400" height="100%" mask="url(#msk1)"/>
</svg>
(Note that I did set the rectangles of the pattern white, we could also have drawn a full white rectangle behind the black ones for the same effect).
I have a simple SVG with two rectangles. I want the "inner" rectangle to be exactly in the middle of the SVG. By setting x and y attributes to 50% the upper left corner is centred. Instead, I want to center the middle of the rectangle. I've tried setting transform-origin to center but it doesn't work.
<svg width="100" height="100">
<rect width="100%" height="100%" fill="gold" />
<rect width="30" height="30" x="50%" y="50%" fill="green" />
</svg>
How to achieve such functionality without manually specifying x and y attributes?
The explanation of the code:
The x and y coordinates of a rectangle represent the position of the upper left corner. So if you give your rectangle x="50" y="50" this will put the upper left corner of the rectangle in the middle of the SVG canvas. To center the rectangle you need to offset it with half width or height: 50 - (30/2) = 35. The solution is <rect width="30" height="30" x="35" y="35" fill="green" />
<svg width="100" height="100" viewBox="0 0 100 100">
<rect width="100%" height="100%" fill="gold" />
<rect width="30" height="30" x="35" y="35" fill="green" />
</svg>
update:
The op is commenting:
I would actually prefer to set 50% for x and y instead of doing some math
In this case you may need to translate your rect, but you still need some math in order to know how much to translate:
<svg width="100" height="100" viewBox="0 0 100 100">
<rect width="100%" height="100%" fill="gold" />
<rect width="30" height="30" x="50%" y="50%" transform="translate(-15,-15)" fill="green" />
</svg>
<svg width="100" height="100" viewBox="0 0 100 100">
<rect width="100%" height="100%" fill="gold" />
<rect width="30" height="30" x="-15" y="-15" transform="translate(50,50)" fill="green" />
</svg>
Yet an other solution would be using a polygon or a path with the center in the origin:
<svg width="100" height="100" viewBox="0 0 100 100">
<rect width="100%" height="100%" fill="gold" />
<polygon points="-15,-15 15,-15 15,15 -15,15" transform="translate(50,50)" fill="green" />
</svg>
Here is an alternative that may work in some cases:
<svg width="100" height="100" viewBox="0 0 100 100">
<rect width="100%" height="100%" fill="gold" />
<rect width="100%" height="100%" transform-origin="50% 50%" transform="scale(0.3)" fill="green" />
</svg>
You can also do the calculation without the transform attribute.
<svg width="100" height="100" viewBox="0 0 100 100">
<rect width="100%" height="100%" fill="gold" />
<rect width="30" height="30" x="calc(50% - 15)" y="calc(50% - 15)" fill="green" />
</svg>
I have an ellipse shape, which I want to split into 4 sections. Is it possible to independently color these sections or is it necessary to create 4 separate custom shapes ?
(I'd post a picture but I don't have the rep yet). Hope its clear what I mean.
Edit you can see code here http://jsfiddle.net/KQ3eH/
<html>
<head>
<style>
.anellipse {
fill:rgb(255,255,255);
stroke-width:2;
stroke:rgb(0,0,0);
}
.aline {
stroke:rgb(0,0,0);
stroke-width:2;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="960"
height="640">
<ellipse class="anellipse" cx="480" cy="320" rx="478" ry="318"/>
<line class="aline" x1="2" y1="320" x2="958" y2="320" stroke-linecap="round" stroke-dasharray="1, 4"/>
<line class="aline" x1="480" y1="2" x2="480" y2="638" stroke-linecap="round" stroke-dasharray="1, 4"/>
</svg>
</body>
</html>
You can do multicolor fills using a pattern.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="960" height="640">
<defs>
<pattern id="pat" width="1" height="1" viewBox="0 0 1 1" preserveAspectRatio="none">
<rect width=".5" height=".5" fill="red" />
<rect x=".5" width=".5" height=".5" fill="green" />
<rect y=".5" width=".5" height=".5" fill="orange" />
<rect x=".5" y=".5" width=".5" height=".5" fill="blue" />
</pattern>
</defs>
<ellipse class="anellipse" cx="480" cy="320" rx="478" ry="318" fill="url(#pat)"/>
<line class="aline" x1="2" y1="320" x2="958" y2="320" stroke-linecap="round" stroke-dasharray="1, 4" />
<line class="aline" x1="480" y1="2" x2="480" y2="638" stroke-linecap="round" stroke-dasharray="1, 4" />
</svg>
See example.
You can't do multi-colour fills (well not more than two colours anyway). So you basically have to split it up into four sections.
Splitting up the ellipse shape itself is a bit tricky. A much easier way would be to draw four coloured rectangles and use the ellipse as a clipping path.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="960" height="640">
<defs>
<clipPath id="myell">
<ellipse class="anellipse" cx="480" cy="320" rx="478" ry="318" />
</clipPath>
</defs>
<g clip-path="url(#myell)">
<rect x="2" y="2" width="478" height="318" fill="red"/>
<rect x="480" y="2" width="478" height="318" fill="green"/>
<rect x="2" y="320" width="478" height="318" fill="orange"/>
<rect x="480" y="320" width="478" height="318" fill="blue"/>
</g>
</svg>
Demo here
For my use it would be convenient for me to have a list of SVG symbols centered on zero, making their placement with use easier. For example a symbol which is simply a circle would have its center at zero and then a given radius. However with the standard clipping that clips away 3/4 of the circle. Here's an example:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1" width="400.0" height="400.0" preserveAspectRatio="xMidYMid meet"
viewBox="0.0 0.0 230.0 150.0">
<rect x="0.0" y="0.0" width="230.0" height="150.0" style="stroke:#000000; stroke-width:0.5 ; fill:#B9FFFF;"/>
<symbol id="concentric">
<circle cx="0.0" cy="0.0" r="10.0" style="stroke:#FF0000; stroke-width:0.266; fill:none"/>
<circle cx="0.0" cy="0.0" r="5.0" style="stroke:#00FF00; stroke-width:0.266; fill:none"/>
</symbol>
<use xlink:href="#concentric" x="20" y="20" />
<use xlink:href="#concentric" x="40" y="20" />
<use xlink:href="#concentric" x="60" y="20" />
</svg>
This will result in three uses of the symbol called "concentric" but since the original symbol has two circles at 0,0 three quarters of the symbol is clipped.
What is the easiest way of not clipping the symbols at 0 0?
You can use overflow="visible" to turn clipping off if you don't want it.
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1" width="400.0" height="400.0" preserveAspectRatio="xMidYMid meet"
viewBox="0.0 0.0 230.0 150.0">
<rect x="0.0" y="0.0" width="230.0" height="150.0" style="stroke:#000000; stroke-width:0.5 ; fill:#B9FFFF;"/>
<symbol id="concentric" overflow="visible">
<circle cx="0.0" cy="0.0" r="10.0" style="stroke:#FF0000; stroke-width:0.266; fill:none"/>
<circle cx="0.0" cy="0.0" r="5.0" style="stroke:#00FF00; stroke-width:0.266; fill:none"/>
</symbol>
<use xlink:href="#concentric" x="20" y="20" />
<use xlink:href="#concentric" x="40" y="20" />
<use xlink:href="#concentric" x="60" y="20" />
</svg>
I want to hide anything that outside a rectangle. (this i have achieved with clipping successfully). but another condition is that, 'also hide anything that comes inside the black big circle'. Now how i can achieve that?
in below example, 'yellow circle' must be eliminated'.
see below images for detail
Original:-
Desired:-
Below is my Svg code:-
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500">
<g>
<rect x="50" y="50" width="200" height="200" stroke="1" fill="red"/>
<circle cx="180" cy="150" r="30" stroke="blue" />
</g>
<g clip-path = "url(#clip1)">
<circle cx="180" cy="150" r="10" stroke="blue" fill="yellow" />
</g>
<clipPath id = "clip1">
<rect x="50" y="50" width="200" height="200" stroke="1" fill="red"/>
</clipPath>
</svg>
Erik Dahlström is right, your clip can include the entire rectangle and the cutout for the circle. This way, anything you associate with #clip1 as the clip-path will not be visible inside your circle area. Here is what it looks like for your example:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500">
<g>
<rect x="50" y="50" width="200" height="200" stroke="1" fill="red"/>
<circle cx="180" cy="150" r="30" stroke="blue" />
</g>
<g clip-path = "url(#clip1)">
<circle cx="180" cy="150" r="10" stroke="blue" fill="yellow" />
</g>
<clipPath id = "clip1">
<path d="M 50,50 l200 0 l0 200 l-200 0z M150,150 a30,30 1 0,0 60,0z M210,150 a30,30 1 0,0 -60,0z"/>
</clipPath>