I wanted a cylindrical container containing liquid and this liquid changes color and its amount in that container, So I used SVG for this purpose (SVG is used for liquid in a cylindrical container).
Here is the source code along with SVG
function changeCol(col) {
document.querySelector('path').style.setProperty('fill', col, '!important');
document.querySelector('ellipse').style.setProperty('fill', col, '!important');
//Its not working I dont know why.
}
function changeHeight(vol) {
//Some Code to change its height.
}
.container {
width: fit-content;
border: solid red;
}
.liquid {
width: 200px;
}
.liquid svg * {
fill: red !important;
}
<div class="container">
<div class="liquid">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216.66 325.25">
<title>liquid_RBt</title>
<path d="M216.66,28V297.25c0,15.47-48.5,28-108.33,28S0,312.72,0,297.25V28C0,43.46,48.5,56,108.33,56S216.66,43.46,216.66,28Z" style="fill:#fff;stroke:#fff;stroke-miterlimit:10;opacity:0.7000000000000001"/>
<ellipse cx="108.33" cy="28" rx="108.33" ry="28" style="fill:#fff;stroke:#fff;stroke-miterlimit:10;opacity:0.8"/>
</svg>
</div>
</div>
<div class="controller">
<div class="color-change">
<button class="col-btn" onclick="changeCol('red');">Red</button>
<button class="col-btn" onclick="changeCol('blue');">Blue</button>
<button class="col-btn" onclick="changeCol('green');">green</button>
</div>
<div class="change-amount">
<input type="number" id="amountInp" onchange='changeHeight(this.value)' placeholder="(in ml)">
</div>
</div>
I've clipped the path with a clipPath that I then move about to hide the parts of the polygon that need to disappear.
I don't know the volume of the cylinder either so you might want to scale the number.
I also fixed the colouring.
function changeCol(col) {
document.querySelector('path').style.setProperty('fill', col);
document.querySelector('ellipse').style.setProperty('fill', col);
}
function changeHeight(vol) {
// not sure how much 100ml is supposed to fill up
document.querySelector('ellipse').cy.baseVal.value = 300 - vol;
document.querySelector('rect').y.baseVal.value = 300-vol;
}
.container {
width: fit-content;
border: solid red;
}
.liquid {
width: 200px;
}
<div class="container">
<div class="liquid">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216.66 325.25">
<title>liquid_RBt</title>
<defs>
<clipPath id="cp">
<rect x="0" y="0" width="230" height="400"/>
</clipPath>
</defs>
<path d="M216.66,28V297.25c0,15.47-48.5,28-108.33,28S0,312.72,0,297.25V28C0,43.46,48.5,56,108.33,56S216.66,43.46,216.66,28Z" style="fill:red;stroke:#fff;stroke-miterlimit:10;opacity:0.7000000000000001;clip-path: url(#cp)"/>
<ellipse cx="108.33" cy="28" rx="108.33" ry="28" style="fill:red;stroke:#fff;stroke-miterlimit:10"/>
</svg>
</div>
</div>
<div class="controller">
<div class="color-change">
<button class="col-btn" onclick="changeCol('red');">Red</button>
<button class="col-btn" onclick="changeCol('blue');">Blue</button>
<button class="col-btn" onclick="changeCol('green');">green</button>
</div>
<div class="change-amount">
<input type="number" id="amountInp" onchange='changeHeight(this.value)' placeholder="(in ml)">
</div>
</div>
Set the preserve aspect ratio to none.
<svg preserveAspectRatio="none" /* here are your other attributes */>
Im in the process of generating a map through html and css, however i seem to have an issue when it comes to Internet Explorer as the map is not shown at all i just get a blank page.
the following code is the html part of my map.
<div class="svg">
<svg class="box" width="65%" height="auto" viewbox="0 0 800 800"
xmlns="http://www.w3.org/2000/svg">
<a href="https://www.google.dk"><polygon class="haderslev"
points="519,5, 538,46, 556,65, 576,61, 591,39, 609,43, 615,60, 622,73,
635,77, 661,70, 730,32, 744,49, 741,69, 731,90, 742,104, 781,128, 787,142,
784,154, 772,179, 769,197, 750,207, 683,212, 667,236, 660,276, 658,281,
626,270, 607,254, 563,247, 520,233, 513,244, 509,265, 371,364, 352,252,
456,227, 437,218, 426,221, 409,242, 389,238, 384,229, 391,216, 400,201,
393,185, 373,170, 349,169, 318,182, 315,197, 302,202, 297,196, 294,171,
290,157, 295,124, 279,99, 265,60, 271,56, 296,63, 311,69, 316,58, 319,49,
351,52, 381,70, 398,50, 406,60, 409,94, 433,98, 451,89, 448,65, 452,50,
463,46, 479,42, 488,12, 507,2" />
<foreignobject x="490" y="125" width="140px" height="30px"
class="haderslevnode">
<div class="htext">Haderslev</div>
</foreignobject></a>
</svg>
</div>
And this is the css to make it work. which functions perfectly on Chrome and Firefox respectively.
.svg{
height: 100vmin;
}
.haderslev{
fill:#7c7c7c;
}
.haderslev:hover{
fill:#eab616;
}
.htext{
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif,MagistralBold;
font-weight:bold;
font-size:24px;
color:#ffffff;
}
any advice is apreciated as i would like this to be as accessible as posible.
*Edit
Internet explorer 10 and 11 are the versions i would like this to funktion in
This is working for me in IE:
I've removed the foreign object and I'm using a text element instead. The class .htext has a fill instead of a color.
I've removed width="65%" height="auto" attributes of the SVG element and I've added this in css:
.svg{
height: 100vmin;
width: 100vmin;
}
svg{border:1px black}
.svg{
height: 100vmin;
width: 100vmin;
border:1px solid;
}
.haderslev{
fill:#7c7c7c;
}
.haderslev:hover{
fill:#eab616;
}
.htext{
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif,MagistralBold;
font-weight:bold;
font-size:30px;
fill:#ffffff;
}
<div class="svg">
<svg class="box" viewbox="0 0 800 800"
xmlns="http://www.w3.org/2000/svg">
<a href="https://www.google.dk"><polygon class="haderslev"
points="519,5, 538,46, 556,65, 576,61, 591,39, 609,43, 615,60, 622,73,
635,77, 661,70, 730,32, 744,49, 741,69, 731,90, 742,104, 781,128, 787,142,
784,154, 772,179, 769,197, 750,207, 683,212, 667,236, 660,276, 658,281,
626,270, 607,254, 563,247, 520,233, 513,244, 509,265, 371,364, 352,252,
456,227, 437,218, 426,221, 409,242, 389,238, 384,229, 391,216, 400,201,
393,185, 373,170, 349,169, 318,182, 315,197, 302,202, 297,196, 294,171,
290,157, 295,124, 279,99, 265,60, 271,56, 296,63, 311,69, 316,58, 319,49,
351,52, 381,70, 398,50, 406,60, 409,94, 433,98, 451,89, 448,65, 452,50,
463,46, 479,42, 488,12, 507,2" />
<text class="htext" x="490" y="150">Haderslev</text>
</a>
</svg>
</div>
I hope it helps.
I have already created a grid of triangles like so:
svg {
margin-left: 0px;
margin-right: -60px;
padding: 0;
}
<div data-bind="foreach: Grid">
<div data-bind="foreach: $data.rowData">
<!-- ko if: $data.owner() === 0 && ($data.pos[0] + $data.pos[1])%2 === 0-->
<svg height="103.92" width="120">
<polygon class="" points="60,0 0,103.92 120,103.92" style="fill:grey;" data-bind="click: $root.test.bind($data, $data)" />
</svg>
<!-- /ko -->
<!-- ko if: $data.owner() === 0 && ($data.pos[0] + $data.pos[1])%2 === 1-->
<svg height="103.92" width="120">
<polygon class="" points="0,0 120,0 60,103.92" style="fill:grey;" data-bind="click: $root.test.bind($data, $data)" />
</svg>
<!-- /ko -->
</div>
</div>
My problem is that only the left half of the triangles is clickable. I think this is due to the (still rectangular) shape of the svg-element. But I have no idea how to fix this. Is there any way to make every triangle clickable in its whole area?
At the moment, all your individual SVGs are overlapping one another and any click that misses a triangle will be swallowed by the parent <svg> element.
The cleanest solution would be to put all your polygons in one big SVG. However there is another way around your problem using the pointer-events property.
Set pointer-events="none" on your <svg> elements so that clicks will pass through them. But you'll also need to set an explicit pointer-events="fill" on your polygons, since otherwise they'll inherit the "none" from their parent SVGs.
var output = document.getElementById("output");
document.getElementById("red").addEventListener("click", function(e) {
output.textContent = "red";
});
document.getElementById("green").addEventListener("click", function(e) {
output.textContent = "green";
});
svg {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
}
polygon {
pointer-events: fill;
}
#output {
margin-top: 120px;
}
<svg width="100px" height="100px">
<polygon points="0,0,100,0,100,100" fill="red" id="red"/>
</svg>
<svg width="100px" height="100px">
<polygon points="0,0,100,100,0,100" fill="green" id="green"/>
</svg>
<div id="output"></div>
You should use one svg tag with both polygons inside it. This way the Square svg elements won't overlap each other:
polygon {
fill: grey;
}
polygon:hover {
fill: #000;
}
<svg height="103.92" width="185">
<polygon points="60,0 0,103.92 120,103.92" />
<polygon points="65,0 185,0 125,103.92" />
</svg>