I generate a SVG in a GWT application and I want to modify the first rect background-color inside my SVG in CSS.
Here the code:
<svg id="chart8" width="720" height="350" style="overflow: hidden;">
<defs id="defs">...</defs>
<rect x="0" y="0" width="720" height="350" stroke="none" stroke-width="0" fill="#ffffff">
<g>...</g>
<g><rect .../></g>
<g>...</g>
</svg>
So i want to modify in CSS the fill value only for the first rect element for #chart8.
I tested this but it's not working:
#chart8 rect:first-of-type {
fill: #F1F1F1;*/
}
Have you an idea?
Thanks!
Related
I have an SVG element of dynamic size. I want to scale it and its contents to a particular pixel size (not by pixels) on demand.
This is invalid:
transform: scale(100px);
My knowledge of SVG is middling so maybe there's a better way, but setting the height/width of the SVG element after the contents are drawn simply causes its contents to runeth over, as they are "absolute" and not "relative" paths.
With JS you can just get the relative sizes:
const scaleX = targetWidth / svg.offsetWidth;
const scaleY = targetHeight / svg.offsetHeight;
svg.style.scale = `${scaleX}px ${scaleY}px`; //untested but you get the idea
My hope is there is a sort of "scaleTo" somewhere in CSS3 I'm unaware of, or neat trick to accomplish this. An authoritative "no" is an acceptable answer.
If you have access to the html for the svg, you can remove the svg element's width and height attributes and replace them with a viewBox attribute of the with the x/y positions set to 0, and the width/height pair set to the values you deleted:
<svg width="300" height="200">
<!-- change to: -->
<svg viewBox="0 0 300 200">
You can then place the svg element inside a sized div and set the css width and height of the svg to 100%:
.svgContainer svg {
width: 100%;
height: 100%;
}
See working snippet to compare effects, I've squeezed the same svg into a smaller div, with and without the viewBox set.
Note for a dynamic resize, the div container has to resize dynamically, the viewBox version of the svg set to 100% width and height of the container will take care of itself. If the container Div had been sized by % instead of pixels, it will grow and shrink with the viewport of the browser.
If you can't access the html markup, you could achieve the same by retrieving the width and height attributes of the svg using javascript and set a new attribute for the viewBox.
More about viewBox: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox
.svgContainer {
width: 100px;
}
.svgContainer svg {
margin: 0;
width: 100%;
height: 100%;
}
<p> 300x200 svg rendered outside of a container:</p>
<svg width="300px" height="200px">
<rect x="0" y="0" width="100%" height="100%" fill="red" stroke="blue"/>
<rect x="100" y="50" width="100" height="50" fill="yellow"/>
<rect x="30" y="20" width="20" height="35" fill="blue"/>
</svg>
<p> same 300x200 svg rendered inside sized div:</p>
<div class="svgContainer">
<svg width="300px" height="200px">
<rect x="0" y="0" width="100%" height="100%" fill="red" stroke="blue"/>
<rect x="100" y="50" width="100" height="50" fill="yellow"/>
<rect x="30" y="20" width="20" height="35" fill="blue"/>
</svg>
</div>
<p>svg modified to use viewbox attribute values, inside sized div</p>
<div class="svgContainer">
<svg viewBox="0 0 300 200">
<rect x="0" y="0" width="100%" height="100%" fill="red" stroke="blue"/>
<rect x="100" y="50" width="100" height="50" fill="yellow"/>
<rect x="30" y="20" width="20" height="35" fill="blue"/>
</svg>
</div>
From this website
https://smooth.ie/blogs/news/svg-wavey-transitions-between-sections
i generated the following svg
<div style="height: 100%; overflow: hidden;" class='parent' ><svg viewBox="0 0 500 150" preserveAspectRatio="none" style="height: 100%; width: 100%;"><path d="M213.19,0.00 C152.69,70.06 270.03,70.06 202.98,150.00 L500.00,150.00 L500.00,0.00 Z" style="stroke: none; fill: #08f;"></path></svg></div>
the problem is that when i try to add background image for example here on the parent class
.parent {
background-image: url('../../../assets/images/calendar.png');
}
then the image is hidden behind the blue color of the svg.How can i 'insert' this image to be on the blue svg color image ?
As name says - it's "background-image" so it always is on the background of selected element.
I suggest that you should make an <img> tag in parent element and style it so that .parent would have attribute position: relative and img should have position: absolute.
Also remember to set top and left/right position for <img>.
it's Answered here https://stackoverflow.com/a/3798797/9017484
You can do it by making the background into a pattern:
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
<image href="wall.jpg" x="0" y="0" width="100" height="100" />
</pattern>
</defs>
your code should be something like this:
<div style="height: 100%; overflow: hidden;" class='parent' >
<svg viewBox="0 0 500 150" preserveAspectRatio="none" style="height: 100%; width: 100%;">
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
<image href="ImageFile.jpg" x="0" y="0" width="100" height="100" />
</pattern>
</defs>
<path d="M213.19,0.00 C152.69,70.06 270.03,70.06 202.98,150.00 L500.00,150.00 L500.00,0.00 Z" style="stroke: none; fill: url(#img1);"></path>
</svg>
</div>
change the opacity level so the color is lower opacity. something like this perhaps.
background {
backgroundColor:blue,
opacity: 0.5;
}
I'm trying to build an SVG image with content that is 100% the width of the container, minus 60px for some text.
If I was using HTML, or SVG with javascript, I would have no problem doing this. But I feel like there should be a way to do this using SVG (and CSS if needed).
I want the equivalent of this (Codepen here):
<svg width="100%" height="100%">
<rect fill="#ccc" x="0" y="0" width="100%" height="100%"></rect>
<text x="100%" y="50%" stroke="black" text-anchor="end">Y-axis</text>
<svg width="100%" height="100%">
<!-- This rect represents the entirety of the contents of the graph -->
<rect x="0" y="0" style="width: calc(100% - 60px)" height="100%" fill="#c88"></rect>
</svg>
</svg>
In the above snippet, the inner <rect> resizes to be 100% - 60px the width of the container element. However, this trick only works for a single element - if you replace that <rect> with a complex SVG structure it no longer works.
Things I've tried:
Doing a transform: scale() via CSS on the <rect> - I can't figure out what to put into the scale() to make it behave like 100% - 60px.
Changing the width of the nested <svg> element
<svg width="calc(100% - 60px)"> doesn't work - can't do calc() inside the width attribute
<svg width="100%" style="width: calc(100% - 60px);"> (with or without the width attribute) - doesn't work - the CSS "width" property is ignored whether or not the width attribute is present.
I'm starting to think what I want to do isn't possible right now with SVG, but it doesn't seem like an uncommon use case. Is there any way to do this?
As discussed in the comments, you might have some luck achieving the same by making your graph area 100% of the viewBox, but place the SVG in a container with 60px of padding on the right to account for the text space.
Moving your text (and background rect) to x="100%" with its text-anchor="start", in addition to letting the SVG overflow, you can get a pretty close result without needing to transform your graphic, since you have a fixed 60px value you can consistently rely on:
div {
padding-right: 60px;
}
svg {
overflow: visible;
}
<div>
<svg width="100%" height="100%">
<rect fill="#ccc" x="100%" y="0" width="60px" height="100%"></rect>
<text x="100%" y="50%" stroke="black" text-anchor="start">Y-axis</text>
<rect x="0" y="0" width="100%" height="100%" fill="#c88"></rect>
</svg>
</div>
PS: Maybe you would prefer your text to have text-anchor="middle", and transform it in CSS with transform: translateX(30px) to place it in the centre of the "text" area — might look cleaner that way:
div {
padding-right: 60px;
}
svg {
overflow: visible;
}
text {
transform: translateX(30px);
}
<div>
<svg width="100%" height="100%">
<rect fill="#ccc" x="100%" y="0" width="60px" height="100%"></rect>
<text x="100%" y="50%" stroke="black" text-anchor="middle">Y-axis</text>
<rect x="0" y="0" width="100%" height="100%" fill="#c88"></rect>
</svg>
</div>
I'm a newbie in SVG so it's probably an easy question. I'm trying to make an SVG Mask with a simple triangle shape inside a rectangle. What I want to achieve is to get the rectangle responsive with his width but the triangle should
- get a fixed size
- be always at the center of the viewport
You'll understand better with my snippet:
.header-arrow {
height: 70px;
}
svg {
height: inherit;
}
#arrow-down-alpha {
transform: translateX(calc(50vw - 130px/2));
}
<div class="header-arrow">
<svg width="100%">
<defs>
<mask id="myMask" x="0" y="0" width="100%" height="100%">
<rect fill="white" x="0" y="0" width="100%" height="100%" />
<polygon id="arrow-down-alpha" fill="black" x="00" y="0" width="165px" height="100%" points="55.91 37.8 111.81 0 0 0 55.91 37.8" />
</mask>
</defs>
<rect id="base-mask" mask="url(#myMask)" x="0" y="0" width="100%" height="100%" />
</svg>
</div>
It's workning right now in chrome, but the translateX (or translate) is not working in firefox and edge. I've tried to use the transform SVG attribute but it seems that I can't use percentages values.
I'm not realy familiar with the viewbox but I'm not sure it will help in this case.
Thanks anyway for any kind of help !
Here's one way to achieve what you want without relying on new units or calc(). It should be cross-browser compatible also.
How it works:
We wrap the triangle in a nested SVG. We use an SVG because it has an x attribute which can take percentages.
We position this nested SVG at x="50%". It is now centred in the mask (roughly, see next step).
We move the triangle shape so it is centred at x=0. That's so that it is not offset from the centre of the mask.
We set overflow="visible" on the nested SVG so the part of the triangle that is now off the left of the SVG (ie. x < 0) are not clipped.
.header-arrow {
height: 70px;
}
svg {
height: inherit;
}
<div class="header-arrow">
<svg width="100%">
<defs>
<mask id="myMask" x="0" y="0" width="100%" height="100%">
<rect fill="white" x="0" y="0" width="100%" height="100%" />
<svg x="50%" overflow="visible">
<polygon fill="black" points="0 38 56 0 -56 0" />
</svg>
</mask>
</defs>
<rect id="base-mask" mask="url(#myMask)" x="0" y="0" width="100%" height="100%" />
</svg>
</div>
I use Inkscape for creating svg images and want to know how to use not embedded css rules.
For example
draw rectangle
in XML-editor add class attribute as
class="rect1"
to svg:rect object
How to add css like
.rect1 {
fill:#ffef00;
}
Here's an example of an SVG in an HTML page that you can style with CSS:
HTML page
<div id="mySvg">
<svg>
<use xlink:href="images/logo.svg#shape" />
</svg>
</div>
The SVG (located at images/logo.svg)
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<g id="shape">
<rect x="50" y="50" width="50" height="50" />
<circle cx="50" cy="50" r="50" />
</g>
</defs>
</svg>
The CSS
svg {
fill: currentColor;
}
#mySvg {
color: green;
}
See working example: plunker
Notes
If you use Inkscape to create your SVG, you'll probably have to do some hand-editing of the SVG to make it styleable with CSS.
Make sure the SVG code doesn't have any fill attributes in it (fill should be in the CSS). When making an SVG with Inkscape, it often has a fill:none or something. You'll have to manually remove those.
When using Inkscape, save files as "Optimized SVG" as described here.