I have the following svg
<g id="end" transform="translate(125,125)">
<path fill="#4DB3B3" d="M50,2.333C23.674,2.333,2.333,23.674,2.333,50S23.674,97.667,50,97.667S97.667,76.326,97.667,50S76.326,2.333,50,2.333z
M82.771,58.973H17.229c-0.862,0-1.561-0.699-1.561-1.561V42.587c0-0.862,0.699-1.561,1.561-1.561h65.542
c0.862,0,1.561,0.699,1.561,1.561v14.825C84.332,58.274,83.633,58.973,82.771,58.973z"/>
<title>End</title>
</g>
The generated svg looks like
If I were to drag from the blue area the dragging works fine.
The only issue I am facing is whenever I try to drag from the center (white area), the event listener doesn't fire. As if the white area in the middle is not part of the SVG.
How can I tackle this issue ?
As if the white area in the middle is not part of the SVG.
Because it's not part of SVG :) The white area inside is the page background. You could try to put something filled inside (like a white rectangle)?
<g id="end" transform="translate(125,125)">
<rect x="10" y="40" width="80" height="20" style="fill:#fff"></rect>
<path fill="#4DB3B3" d="M50,2.333C23.674,2.333,2.333,23.674,2.333,50S23.674,97.667,50,97.667S97.667,76.326,97.667,50S76.326,2.333,50,2.333z
M82.771,58.973H17.229c-0.862,0-1.561-0.699-1.561-1.561V42.587c0-0.862,0.699-1.561,1.561-1.561h65.542
c0.862,0,1.561,0.699,1.561,1.561v14.825C84.332,58.274,83.633,58.973,82.771,58.973z"/>
<title>End</title>
</g>
Related
I'm trying to create a svg button with transparent text. It looks like there is no way to do it easily in React-native, so maybe I'll just create an svg, that will have transparent text. How do I do that?
I've tried to do it in Figma, but it looks like the only way to do it there is to put a specific image behind. Text can't be truly transparent, it can only mask a picture.
You can use an svg mask with a white rectangle and a black text. The shapes you have - like the rectangle with rounded corners in this example - will be painted only under the white parts of the mask. Since the text is black it will apear like a hole.
svg{border:solid; background:silver;}
<svg>
<mask id="m">
<rect x="10" y="10" width="280" height="130" fill="white" />
<text x="150" y="75" font-size="90" font-family="arial" dominant-baseline="middle" text-anchor="middle" fill="black">text</text>
</mask>
<rect x="10" y="10" width="280" height="130" rx="20" mask="url(#m)" />
</svg>
I'm looking for a way to use an inline SVG pattern that scales vertically and only repeats horizontally. Does anyone know if this is possible and if so how?
I know I can makes this just using a SVG as a background-image, but I want to be able to use this SVG in a javascript/component-based workflow so inline is the best fit for that.
Here is link with my work-in-progress: https://codepen.io/devotee/pen/GRJJpKL
And some code:
<div class="divider">
<svg width="100%" height="40px">
<defs>
<pattern id="pattern" x="0" y="0" width="60" height="6" patternUnits="userSpaceOnUse">
<path fill="none" stroke="#F5A861" d="M60 5C45 5 45 1 30 1S15 5 0 5"/>
</pattern>
</defs>
<rect x="10" y="6" width="100%" height="12" fill="url(#pattern)" />
</svg>
As you can see in the link, this repeats in both directions, so setting a bigger height value does not accomplish what I want. I would like this pattern to always fill the containers height (or simply be set to a value with CSS) but repeat horizontally.
Here are some images to illustrate what I mean:
Top is wanted behaviour, bottom is unwanted behaviour:
The background scales vertically and does not repeat. It takes as much space vertically as it can (fills parent height or whatever height value it has specified)
Top is wanted behaviour, bottom is unwanted behaviour:
It does not stretch the SVG horizontally but merely repeats it.
Any ideas or input on how to achieve this?
This is the only thing preventing me from understanding how the coordination system works...
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="600" height="400" x="0" y="0">
<text x="0" y="0">
<tspan>✉</tspan>
</text>
</svg>
If the y-axis points down why does y="0" start from the outside of the viewport? Shouldn't it start right at the top edge? It blows my logic away...
The x-axis points to the right and it starts right in the left edge of the viewport, now this is logic and normal behavior.
Why does the y-axis behave like this? Or why make one start from the outside and the other not? What is the logic behind this? Unless I'm misunderstanding how it works...
It's all in the SVG specification
the initial coordinate system has the origin at the top/left with the x-axis pointing to the right and the y-axis pointing down
The origin for text is basically the bottom left corner of the glyph for left-to-right text.
For most uses of Latin text (i.e., writing-mode:lr, text-anchor:start and alignment-baseline:baseline) the alignment-point in the glyph will be the intersection of left edge of the glyph cell (or some other glyph-specific x-axis coordinate indicating a left-side origin point) with the Latin baseline of the glyph.
default baseline is in text downside, can use attr dominant-baseline change baseline, here is mdn example
<svg viewBox="0 0 200 120" xmlns="http://www.w3.org/2000/svg">
<path d="M20,20 L180,20 M20,50 L180,50 M20,80 L180,80" stroke="grey" />
<text dominant-baseline="auto" x="30" y="20">Auto</text>
<text dominant-baseline="middle" x="30" y="50">Middle</text>
<text dominant-baseline="hanging" x="30" y="80">Hanging</text>
</svg>
The client asked to scale the drawing down so I added width/height and viewBox to the SVG element. The problem is that some elements are scaled differently than others. The structure of the svg is like this:
<svg width="100%" height="100%" viewBox="0 50 700 200">
<defs>...</defs>
<g id="group-ab">
Here are the boxes (drawn with polyline) that are scaled correctly, both in their own group (group-a, group-b)
</g>
<g id="group-a-id">
<text>A</text>
<circle id="group-a-id-bg-circle"></circle>
</g>
<g id="group-B-id">
<text>B</text>
<circle id="group-b-id-bg-circle"></circle>
</g>
<path id="group-a-pattern" d="..."></path>
<path id="group-b-pattern" d="..."></path>
</svg>
The path is the pattern for the pieces. It seems that everything that isn't under the group "group-ab" isn't scaled correctly, see the image below. Normally (when not using viewBox) the pattern fills up the boxes and the A/B are centered with the boxes (same translates are done to them).
Why is this happening? One would think that it doesn't matter if elements are within groups or not if svg is scaled.
I would like to insert a text (maybe multi-line) into a rect, vertically and horizontally centered. The SVG is created on server side in NodeJS, and the result will be displayed in a browser.
SVG does not really support centering text. On the other hand, I have no idea how to calculate width/height of a text on server side to position it properly.
Any ideas?
If you know the width/height, you can position your text element with x,y and set the alignment to middle...
https://jsfiddle.net/ian_b/z9t291nL/1/
<svg width="400" height="400" viewBox="0 0 400 400">
<text text-anchor="middle" alignment-baseline="middle" x="200" y="200">QWERTYUIOPASDFGHJKLZXCVBNM</text>
<circle cx="200" cy="200" r="5"/>
</svg>
Its more tricky for multiple lines, and you would need to adjust taking into account font sizes etc.