Essentially I needed to make the center "cut-out" keep a fixed shape and size regardless of vector scale. Is there a way to achieve this?
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="none" style="fill-rule:evenodd;" viewBox="0 0 2802 2657">
<path d="M290 4c-95,733 -191,1466 -286,2200 760,150 1520,300 2279,450 172,-223 343,-446 515,-669 -114,-572 -229,-1144 -343,-1716 -722,-88 -1444,-176 -2165,-264zm696 1027c-103,111 -205,222 -308,333 94,111 188,222 282,333 342,-205 684,-410 1026,-616 -333,-17 -667,-34 -1000,-51z"/>
</svg>
So I managed to do something after some editing to your SVG.
To achieve what you're asking you'll need to use / have :
- the SVG mask attribute
- A very large shape for the mask ( as much large as the max scale you want to use on the visible shape )
- The shape that you want to resize
- Resize the shape with transforms
Your SVG should looks like the following
<svg>
<defs>
<mask id="theMask">
<path fill="#ffffff" d=""/>
</mask>
</defs>
<g mask="url(#theMask)">
<path fill="#ffffff" id="shapetoresize" d=""/>
</g>
</svg>
I posted a pen as a "Proof of concept"
Feel free to fork it and use it to achieve what you're trying to do.
Codepen
note: as pointed out by #thioutp , The JS is only for demo purposes, you don't need GSAP to achieve this.
Related
I have a situation where there are multiple SVG elements in an HTML document. The elements are laid out using HTML rules, box model, flexbox, and now I'm told grid will start being used soon. This jsfiddle is an example, showing a pair of filled parabolas drawn with common endpoints and slightly different control points using a Quadratic path operation. Other cases may be simple horizontal or diagonal lines of various thickness.
In the first SVG in the fiddle, the two endpoints are in the same SVG block, and dimensions (in SVG units) are well known, and it is straightforward to draw the parabola. (the control points are also shown here)
However, the next two SVG demonstrate the problem. The endpoints are in separate SVGs, separated by unknown amounts of "stuff" here represented by a bit of text. It is clear that javascript will be required to rewrite the coordinates of the endpoints and control points, so that the parabola (or whatever) can connect the two.
How do I obtain the SVG unit coordinates of the endpoint in the second SVG relative to the coordinate system of the third SVG, so that I can connect the parabola to its left endpoint?
One possibly simplifying assumption can be made: the SVG unit to pixel coordinate ratio will be consistent for any drawing, although for added complexity that ratio may change from time to time (triggering the need to recalculate and re-draw the cross-SVG items).
A possibly complicating issue is that most of the endpoints will be nested in two layers of nested SVG elements: the outer SVG will have its SVG unit be the same size as the CSS pixel, but the inner SVG will have this different unit size that may change from time to time.
IDs or CLASSes can be added as necessary to the solution.
/**CSS*/
svg { overflow: visible; }
<!--HTML -->
<svg width="12cm" height="6cm" viewBox="0 0 1200 600"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Example quad01 - quadratic Bézier commands in path data</title>
<desc>Picture showing a "Q" a "T" command,
along with annotations showing the control points
and end points</desc>
<rect x="1" y="1" width="1198" height="598"
fill="none" stroke="blue" stroke-width="1" />
<path d="M500,300 Q300,50 100,300 Q300,75 500,300"
fill="green" stroke="green" stroke-width="1" />
<!-- End points -->
<g fill="black" >
<circle cx="100" cy="300" r="3"/>
<circle cx="500" cy="300" r="3"/>
</g>
<!-- Control points and lines from end points to control points -->
<g fill="#888888" >
<circle cx="300" cy="50" r="3"/>
<circle cx="300" cy="75" r="3"/>
</g>
<path d="M100,300 L300,50 L500,300
L300,75 L100,300"
fill="none" stroke="#888888" stroke-width="1" />
</svg>
<br>
<svg width="2cm" height="6cm" viewBox="0 0 200 600"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Example quad01 - quadratic Bézier commands in path data</title>
<desc>SVG left endpoint</desc>
<rect x="1" y="1" width="198" height="598"
fill="none" stroke="blue" stroke-width="1" />
<!-- End points -->
<g fill="black" >
<circle cx="100" cy="300" r="3"/>
</g>
</svg>
some stuff here
<svg width="2cm" height="6cm" viewBox="0 0 200 600"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Example quad01 - quadratic Bézier commands in path data</title>
<desc>SVG right endpoint</desc>
<rect x="1" y="1" width="198" height="598"
fill="none" stroke="blue" stroke-width="1" />
<path d="M100,300 Q-100,50 -300,300 Q-100,75 100,300"
fill="green" stroke="green" stroke-width="1" />
<!-- End points -->
<g fill="black" >
<circle cx="100" cy="300" r="3"/>
</g>
</svg>
(In general, the coordinates will not have the same Y position, this example is simplistic: but all I need is a way to determine the position of the endpoint in the proper coordinate system.)
This was hard for me to figure out, but a co-worker helped, and we finally puzzled through it. The solution turns out to be fairly straightforward.
The way we puzzled things out, it seems that there is a coordinate transformation matrix that can be used to convert from SVG user coordinates to browser pixels... and, via its inverse, back to SVG user coordinates. This is obtained for each starting and ending elements by:
start = document.getElementById('startSVGElement');
spt = start.createSVGPoint();
sCTM = start.getScreenCTM();
end = document.getElementById('endSVGElement');
ept = end.createSVGPoint();
eCTM = end.getScreenCTM();
Then, to draw from a point ( 100, 400 ) in the starting element, to a point ( 50, 60 ) in the ending element, you fill in the points:
spt.x = 100;
spt.y = 400;
ept.x = 50;
ept.y = 60;
Now the transformation magic: transform the ending point from SVG space to browser pixel space based on its CTM, and then transform back to SVG space using the starting element CTM inverse:
ept_in_start = ept.matrixTransform( eCTM ).matrixTransform( sCTM.inverse())
Now spt and ept_in_start have coordinates relative to the same element (the starting element) and in the same coordinate system (the SVG space of the starting element), and you can use those coordinates to draw anything you wish, based on the coordinates.
Of course, if the page reflows, you have to recalculate and redraw. And you have to be sure to get the right CTM for the (x,y) coordinates of each endpoint... there are lots of overlaid coordinate systems if you have nested SVGs and transformations.
Good afternoon everyone,
I'm defining an SVG on my page with the following defs.
<svg width="0" height="0">
<defs>
<g id="stroke-hexagon">
<polygon fill="#002663" stroke="#FFFFFF" stroke-width="6" stroke-miterlimit="12" points="57.8,185 5.8,95 57.8,5 161.8,5 213.8,95 161.8,185 "/>
</g>
<g id="hexagon">
<polygon fill="#006890" points="52,180 0,90 52,0 156,0 208,90 156,180 "/>
</g>
</defs>
</svg>
...and implementing it later in the HTML using this:
<svg width="208px" height="180px" viewBox="0 0 208 180" >
<use xlink:href="#hexagon"></use>
<text class="faicon" x="50%" y="70px" fill="white" font-size="80px" text-anchor="middle"></text>
<text text-anchor="middle" x="50%" y="70%" fill="white">Logo Here</text>
</svg>
Works totally fine. I am also able to style the polygon's fill with simple CSS. Looks like this:
#hexagon:hover polygon {
fill:#990000;
}
The hover effect fails, however, whenever the mouse leaves the polygon and instead hovers over either of the 'text' elements within the svg. Is there a way to define a CSS rule that prevents this behavior. Or, would it be better (easier) to change the attribute using JS / jQuery?
Thanks!
Your texts are rendered on top of your polygon and are therefore intercepting mouse events. You should set up a css rule like
text {
pointer-events: none;
}
This will prevent the text from becoming a target of mouse events which should give you the desired hover effect for the polygon.
Graphviz is giving me output that looks basically like this:
<svg>
<g id="graph0" class="graph" transform="scale(0.138865 0.138865) rotate(0) translate(4 4648)">
<title>G</title>
...
<g id="node36" class="node">
<title>SomeTitle</title>
<g id="a_node36">
<a>
<ellipse cx="1225" cy="-3546" rx="85.1304" ry="18">
</ellipse>
<text x="1225" y="-3541.8">
sometext</text>
</a>
</g>
</g>
...
</g>
</svg>
I am no Svg expert, but it seems that since the contents of the nodes are positioned relative to the graph group and not the node group, doing a scale on a node is going to have undesired results. Do I have to walk the graph and "normalize" everything? Is there a switch on Graphviz to do this?
Does the normalization algorithm take the the upper left of the bounding box described by the x and y of the groups elements, and use that as a translate for the group and adjust the members to the new coordinate system?
I am using jQuery Svg, as well as D3 -- do either of those have a normalize function that would help in this situation?
This seems a pain, so I have to ask why is this the reality.
Since the origin of the document is, by default, at the top left, doing a straight scale of the node will also cause it to move.
However that would be true in all but the specific situation in which the node is centred on the origin. Correcting that problem is fairly simple. SVG transforms can be built up from a series of basic transformation operations.
To scale an element around its centre point you have all you have to do is:
translate the centre point to the origin: translate(-1225,3546)
scale: scale(4)
translate it back to its original location: translate(1225,-3546)
<svg width="400" height="400">
<g id="graph0" class="graph" transform="scale(0.138865 0.138865) rotate(0) translate(4 4648)">
<title>G</title>
<g id="node36" class="node">
<title>SomeTitle</title>
<g id="a_node36" transform="translate(1225,-3546) scale(4) translate(-1225,3546)">
<a>
<ellipse cx="1225" cy="-3546" rx="85.1304" ry="18" fill="blue">
</ellipse>
<text x="1225" y="-3541.8" fill="white">
sometext</text>
</a>
</g>
</g>
<g id="node36" class="node">
<title>SomeTitle</title>
<g id="a_node36_orig">
<a>
<ellipse cx="1225" cy="-3546" rx="85.1304" ry="18" fill="red">
</ellipse>
<text x="1225" y="-3541.8" fill="white">
sometext</text>
</a>
</g>
</g>
</g>
</svg>
Note that, due to the way transforms work, the operations are listed in reverse order in the transform attribute.
I have the following svg:
<svg
width="1750"
height="1125"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<g id="svg_4">
<g id="imgG_4">
<image
transform="rotate(35.3608 608.333 503.301)"
xlink:href="https://www.google.com/images/srpr/logo4w.png"
id="img_4"
height="188.79927"
width="188.79927"
y="408.90001"
x="706.21582"/>
</g>
<rect
transform="rotate(35.3608 783.333 667.587)"
id="border_4"
height="264.31644"
width="360.92146"
y="535.42838"
x="602.87256"
fill-opacity="0"
stroke-width="5"
stroke="#000000"
fill="#000000"/>
</g>
</g>
</svg>
I'd like to change the angle of the both the rect and image. I cannot however, figure out how to adjust the image such that its spacing within the rect is consistent as i rotate the rect.
E.g. After rotating both the rect and the image the image has the same amount of whitespace above and to the left as it did prior to rotation of both elements.
I cannot put the rotation on the container groups due to other technical restraints.
I'd like to end up with something like:
<svg
width="1750"
height="1125"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<g
id="svg_4">
<g
id="imgG_4">
<image
transform="rotate(70.3608 608.333 503.301)"
xlink:href="https://www.google.com/images/srpr/logo4w.png"
id="img_4"
height="188.79927"
width="188.79927"
y="408.90001"
x="706.21582"
/>
</g>
<rect
transform="rotate(70.3608 783.333 667.587)"
id="border_4"
height="264.31644"
width="360.92146"
y="535.42838"
x="602.87256"
fill-opacity="0"
stroke-width="5"
stroke="#000000"
fill="#000000"
/>
</g>
</g>
</svg>
The caveat is that the x,y values have to change on the image in order to get the layout correct and I have know idea how to calculate them.
Any idea on how I would go about this? I will be using javascript to do the math involved...
Plnkr is here
Assuming you wanted to rotate both elements around the same rotation point as the rectangle (ie. 783.333,667.587), then all you need to is apply the additional rotation to the front of both element transforms. So:
<image transform="rotate(90 783.333 667.587) rotate(70.3608 608.333 503.301)"
<rect transform="rotate(90 783.333 667.587) rotate(70.3608 783.333 667.587)"
would rotate both elements an additional 90deg round the above centre of rotation.
However you said you want to do the maths yourself in Javascript. So to get you started, it might help to know that the transform:
rotate(r x y)
is equivalent to:
translate(x y) rotate(r) translate(-x -y)
How do I make the text on a path (see screenshot) extend so that it follows the entire textPath?
I have tried using the method attribute value stretch but it doesn't work like I expect - it doesn't stretch the text along the path.
Is there a way to make this work in all browsers?
The way to spread out the text over the entire textPath is to use the textLength attribute. Also see this other question for how to compute a good value for textLength. Here's how to do it:
<svg viewBox="0 0 500 300" version="1.1">
<defs>
<path id="s3" d="M 10,90 Q 100,15 200,70" />
</defs>
<text font-size="20">
<textPath xlink:href="#s3" textLength="205">
Short text
</textPath>
</text>
<use xlink:href="#s3" fill="none" stroke="black" stroke-width="1"/>
</svg>
Viewable example: http://jsfiddle.net/zkZ2n/
Here's the bugreport for Firefox not supporting textLength: https://bugzilla.mozilla.org/show_bug.cgi?id=569722