I'm having trouble understanding how I can use TailwindCSS transition utilities to perform a simple width transition in this Angular component. For example, the button below usually displays an SVG icon. However, occasionally, it displays a text message. When the text message is displayed instead of the SVG icon, the width of the button changes. I would like to add a transition to the width change (in both directions) but I cannot figure out how. Any help appreciated!
<button class="bg-green-600 text-green-100 ring-green-400 p-4 rounded-full focus:outline-none">
<span *ngIf="buttonText" class="font-semibold">{{buttonText}}</span>
<svg *ngIf="!buttonText" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
</svg>
</button>
I think you need the transition-duration css property which corresponds to a transition-{number} tailwind class https://tailwindcss.com/docs/transition-duration. You can also use a transition timing function https://tailwindcss.com/docs/transition-timing-function
EDIT
The problem isn't with tailwind, but rather with css itself take a look at this css-trick https://css-tricks.com/using-css-transitions-auto-dimensions/ Sorry I didn't notice this earlier.
One way to fix this issue is to set the width css property to it's actual computed width.
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've got a SVG exported from Adobe XD, it is a collection of five "cards" showing some people's faces arranged in a particular pattern. Here is how the code is structured:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="700" height="430" viewBox="0 0 700 430">
<defs>
...
</defs>
<g id="USERS" clip-path="url(#clip-USERS)">
<g id="Group" transform="translate(-793.227 -295.708)">
<g id="User_5" data-name="User 5" transform="translate(1340.921 326.103) rotate(-14)">
...
</g>
<g id="User_4" data-name="User 4" transform="translate(1052.907 570.449) rotate(16.024)">
...
</g>
<g id="User_3" data-name="User 3" transform="translate(1170.434 426.218) rotate(-14)">
...
</g>
<g id="User_2" data-name="User 2" transform="translate(984.139 426.348) rotate(-14)">
...
</g>
<g id="User_1" data-name="User 1" transform="translate(827.868 347.168) rotate(16.024)">
...
</g>
</g>
</g>
</svg>
I need to place the image on a website which has a responsive background, and I am trying to make the size of the image responsive as well.
With Adobe XD, I can resize the group without changing the aspect ratio of the cards - that is, only the space between them is affected. I am trying to achieve the same with the SVG on my website.
Here is a GIF of what I'd like to obtain specifically:
So far, I've tried substituting width="700" height="430" with width="100%" height="auto" in the SVG header, maybe even adding preserveAspectRatio="none", but that affects the entire image, not only the space between objects.
Any help?
What you want is not possible just by messing with viewBox and preserveAspectRatio. Anything inside the SVG will be scaled along with the SVG itself.
You would need to use Javascript, then either:
Don't use viewBox and instead reposition the cards yourself according to the current width and height, or
Let SVG reposition and scale them (using viewBox etc) , and then apply the inverse scaling transform to each card to counteract the scaling that SVG applied.
Alternatively, make each card a separate SVG image and use CSS to position them relative to the parent width and height.
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 have adobe illustrator. When I export graphic to svg, the text part looks like:
<style type="text/css">
.st6{fill:#FFFFFF;}
</style>
<text id="text2" transform="matrix(1 0 0 1 153.873 305.2743)" class="st6">Default text</text>
This text is aligned to center.
Now I change text inside browser with javascript - so, replace "Default text" with "New text". This text is not aligned to center any more.
If I change text, how can I achieve that it is always aligned to center?
I have try with adding "text-align:center" to st6 class or adding this property to text element:
text-anchor="middle"
but doesn't work.
Any idea?
One interesting other example which I don't understand. Here is part of svg template I have:
<g id="text_4">
<g>
<defs>
<rect id="SVGID_10_" x="9.96" y="273.53" width="170" height="15"/>
</defs>
<clipPath id="SVGID_11_">
<use xlink:href="#SVGID_10_" style="overflow:visible;"/>
</clipPath>
<g style="clip-path:url(#SVGID_11_);">
<text data-label="Text 4" text-anchor="middle" x="95" y="282.7" style="fill:#748B9E; font-family:'Merriweather'; font-size:8px;">2013 Riesling </text>
</g>
</g>
I can change text for example instead of "2013 Riesling" I can add "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" and text is still in the center.
Then I have removed all elements from this svg except text(so remove all g elements and clip path) only this left:
<text data-label="Text 4" text-anchor="middle" x="95" y="282.7" style="fill:#748B9E; font-family:'Merriweather'; font-size:8px;">2013 Riesling</text>
But template is still the same, nothing has changed if I view it inside browser. How is that possible? So, I can shorten size of SVG for 70%.
And here text is always centered while in my template if I do the same it is not. Interesting.
Adobe Illustrator has positioned your text so that it is centered according to your design. But obviously that positioning is specific to that particular piece of text.
text-align: center will not work with SVGs. That is an HTML property.
text-anchor: middle is the correct property to use. It will cause the text to be centred on the coordinates you specify. So in order for the new text to be centered properly, you will have to adjust the x coordinate of your text element.
In your case the text is being positioned using a transform attribute. You could either adjust the transform, or replace it with x and y attributes.
So, for example, if the centre position for your text was calculated to be (200, 305.2743), you would need to change your text element to:
<style type="text/css">
.st6 {fill:#FFFFFF; text-anchor:middle;}
</style>
<text id="text2" transform="matrix(1 0 0 1 200 305.2743)" class="st6">New text</text>
or
<style type="text/css">
.st6 {fill:#FFFFFF; text-anchor:middle;}
</style>
<text id="text2" x="200" y="305.2743" class="st6">New text</text>
How you determine the centre position at run-time (in browser) is up to you.
One option is to use getComputedTextLength() or getBBox() on the text element. Then add half the width to your x coord.
Or alternatively you could alter your Illustrator file so that your placeholder text was something tiny like ".". Then you would probably be close enough to centre that you wouldn't need to adjust the coordinates.
Elaborate comment containing workaround:
As has been pointed out in the accepted answer, Illustrator (2017.1.0 release) doesn't export the text-anchor=middle tag in it's SVG's. Which is a pity if you want to use the SVG with dynamically generated and centered text.
I found the following work-around.
Step 1: create your design in AI with the text centered and the text-frame in the exact right location
Step 2: when you're done drawing and before exporting it to SVG: RIGHT-align the text:
Step 3:
Manually (or dynamically) add the text-anchor=middle attribute to the text-frame.
<text text-anchor="middle">9650</text>
Step 4:
Admire the result
I'm having a problem with a new website I'm developing. It's the first time I'm using SVG's. Basicly I need to cut a circle that is always centered in the page out of my image to show the image under the element. I have tried working with my clipping and everything was great. I can't seem to find the error in my mask code. Here's the link to a quick fiddle that I setup. Thanks!
<div class="bg-gradient">
<img src="http://www.redhdwallpapers.com/wp-content/uploads/2014/05/red-background-6.jpg"/>
</div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<mask id="mask">
<circle cx="50%" cy="50%" r="45%" fill="none" />
</mask>
</defs>
</svg>
A mask with fill="none" is no mask at all. Try fill="white" instead.
If you want a hole then you'll want to make your mask the inverse of what it is now so use a path with fill-rule: evenodd property and first trace out a rectangle using M, h and v round the edge of the image and then trace out a circle using arcs or bezier curves in the opposite direction to the direction you traced the edge so that the fill-rule makes a hole in the path.
You'd be better off switching back to a clipPath though since it uses far less memory than a mask if all you want to do is clip.