I have the following code:
<div id="parent">
<div class="child" id="air1">Medium 1</div>
<div class="child" id="glass">Medium 2</div>
<div class="child" id="air2">Medium 1</div>
</div>
<style>
#parent {
background: #999;
padding: 0px;
}
#glass {
background: #666;
}
.child {
background: #ccc;
height: 200px;
margin: 0px;
}
</style>
I want to draw an arrow from #air1 into #glass using an svg. I added the following code into the div to draw an example arrow:
<svg width="300" height="100">
<defs>
<marker id="arrow" markerWidth="13" markerHeight="13" refx="2" refy="6" orient="auto">
<path d="M2,2 L2,11 L10,6 L2,2" style="fill:red;" />
</marker>
</defs>
<path d="M30,150 L100,50"
style="stroke:red; stroke-width: 1.25px; fill: none;
marker-end: url(#arrow);"
/>
</svg>
I don't want the arrow pointed in a random direction though, I want it to point into #glass like this:
Also, how would I go about drawing a less steep arrow like this as well:
How can I do this?
You can achieve that by using positioning (inserting the svg into the first section and set it to position: absolute;) and adjusting the offset of the path element. To make the arrow pointing down, just use a negative value for the second value of the path description attribute.
For more information see w3schools about path.
#parent {
background: #999;
padding: 0px;
}
#glass {
background: #666;
}
.child {
background: #ccc;
height: 200px;
margin: 0px;
position: relative;
}
svg {
position: absolute;
left: 0;
}
<div id="parent">
<div class="child" id="air1">Medium 1
<svg width="400" height="200">
<defs>
<marker id="arrow" markerWidth="13" markerHeight="13" refx="2" refy="6" orient="auto">
<path d="M2,2 L2,11 L10,6 L2,2" style="fill:red;" />
</marker>
</defs>
<path d="M-600,-10 L300,195" style="stroke:red; stroke-width: 1.25px; fill: none; marker-end: url(#arrow);" />
</svg>
</div>
<div class="child" id="glass">Medium 2</div>
<div class="child" id="air2">Medium 1</div>
</div>
Related
#myElement {
width: 50px;
height: 300px;
background: linear-gradient(0deg, #4a94cd, #fe49a6);
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
#myBar {
width: 100%;
height: 10px;
background: #000;
}
<div id="myElement">
<div id="myBar"></div>
<div id="myBar"></div>
<div id="myBar"></div>
<div id="myBar"></div>
<div id="myBar"></div>
<div id="myBar"></div>
<div id="myBar"></div>
<div id="myBar"></div>
<div id="myBar"></div>
<div id="myBar"></div>
</div>
How can I make the black part transparent to show the background behind，The background won't always be white，maybe a picture，The color part is a gradient of the whole
Change the id attribute to class for the div myBar and change the background to white.
We can target each of myBar elements using nth-child selector
.myBar:nth-child(1),.myBar:nth-child(2) and so on. I have added a sample below.
We can also use images as background by adding background-image property to the css definition.
#myElement {
width: 50px;
height: 300px;
background: linear-gradient(0deg, #4a94cd, #fe49a6);
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
.myBar {
width: 100%;
height: 10px;
background: white;
}
.myBar:nth-child(1){
background:red;
}
----------
<div id="myElement">
<div class="myBar"></div>
<div class="myBar"></div>
<div class="myBar"></div>
<div class="myBar"></div>
<div class="myBar"></div>
<div class="myBar"></div>
<div class="myBar"></div>
<div class="myBar"></div>
<div class="myBar"></div>
<div class="myBar"></div>
</div>
I remember seeing in another post of yours that you want to make a progress bar (you should mention these things to make it easier for others to answer with relevant answers). And you probably want to change the height dynamically or something with this one div (to simulate the progress).
You can use the css property clip-path to achieve the effect of alternating between your gradient and a transparent background:
.container {
background: url(https://picsum.photos/id/999/360);
padding: 20px;
width: 320px;
}
#myElement {
width: 50px;
height: 320px;
background: linear-gradient(0deg, #4a94cd, #fe49a6);
clip-path: polygon(
0 0,100% 0,100% 20px,0 20px,
0 30px,100% 30px,100% 50px,0 50px,
0 60px,100% 60px,100% 80px,0 80px,
0 90px,100% 90px,100% 110px,0 110px,
0 120px,100% 120px,100% 140px,0 140px,
0 150px,100% 150px,100% 170px,0 170px,
0 180px,100% 180px,100% 200px,0 200px,
0 210px,100% 210px,100% 230px,0 230px,
0 240px,100% 240px,100% 260px,0 260px,
0 270px,100% 270px,100% 290px,0 290px,
0 300px,100% 300px,100% 320px,0 320px
);
}
<!--
I just added the container to show a background image behind
the element with the clip-path
-->
<div class="container">
<div id="myElement"></div>
</div>
You can create it easily using svg masking technique because using divs will not work
As you will see on running the snippet that the image is behind the svg but looks very clear as the black part is now transparent.
#myElement {
width: 50px;
height: 300px;
position: relative;
}
img{
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="src/style.css">
</head>
<body>
<svg width="50" height="300" id="myElement">
<defs>
<linearGradient xl=0 x2=0 y1=0 y2=1 id="Gradient">
<stop stop-color="#fe49a6" offset="0%" />
<stop stop-color="#4a94cd" offset="100%" />
</linearGradient>
<pattern id="pattern" x="0" y="0" width="50" height="30" patternUnits="userSpaceOnUse">
<rect x=0 y=0 width=50 height=20 fill="#999" />
</pattern>
<mask id="mask-gradient" x="0" y="0" width="50" height="300">
<rect x="0" y="0" width="50" height="300" fill="url(#pattern)" />
</mask>
</defs>
<rect id="rect1" fill=url(#Gradient) x="0" y="0" width="50" height="300" mask="url(#mask-gradient)" />
</svg>
</div>
<img src="https://images.unsplash.com/photo-1667400104714-53da4894bf18?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80">
</body>
</html>
This is a job for mask
#myElement {
width: 50px;
height: 300px;
background: linear-gradient(0deg, #4a94cd, #fe49a6);
-webkit-mask: linear-gradient(0deg,#0000 10px, #000 0) 0 0/100% 10%;
}
body {
background: orange;
}
<div id="myElement">
</div>
.showcase-components-colorlist color {
border: 2px solid transparent;
margin: 1px;
padding: 2px;
border-radius: 50%;
cursor: pointer;
}
<div class="showcase-components-colorlist color showcase-components-colorlist color-- active">
<svg width="40" height="40">
<circle cx="20" cy="20" r="19" fill="#c5145d" stroke="#fff" stroke-width="1"></circle>
</svg>
</div>
<div class="showcase-components-colorlist color">
<svg width="40" height="40">
<circle cx="20" cy="20" r="19" fill="#db2586" stroke="#fff" stroke-width="1"></circle>
</svg>
</div>
How to add a check mark to one of the circles as generated by the code above.
One way to do this is through pseudo content. You need to give the element which you'll set the pseudo content a relative container. Then, you create your pseudo content (in this case, a check mark). The positioning will be relative to the parent element's dimensions.
.showcase-components-colorlist {
border: 2px solid transparent;
margin: 1px;
padding: 2px;
border-radius: 50%;
cursor: pointer;
position: relative;
}
.showcase-components-colorlist.selected::before {
content: '✅';
position: absolute;
left: 11px;
top: 9px;
}
<div class="showcase-components-colorlist color showcase-components-colorlist color-- active">
<svg width="40" height="40"><circle cx="20" cy="20" r="19" fill="#c5145d" stroke="#fff" stroke-width="1">
</circle>
</svg>
</div>
<div class="showcase-components-colorlist selected">
<svg width="40" height="40">
<circle cx="20" cy="20" r="19" fill="#db2586" stroke="#fff" stroke-width="1"></circle>
</svg>
</div>
Create your own <svg-option> Native JavaScript Web Component.
<svg-option></svg-option>
<svg-option fill="red" selected></svg-option>
<svg-option fill="rebeccapurple" selected-fill="yellow" selected></svg-option>
creates:
<script>
customElements.define("svg-option",class extends HTMLElement{
connectedCallback(){
this.style.display = "inline-block";
this.innerHTML=`<svg viewBox="0 0 50 50">
<circle cx="50%" cy="50%" r="49%" fill="${this.getAttribute("fill") || "green"}"/>
<circle cx="50%" cy="50%" r="30%" fill="${this.getAttribute("selected-fill") || "beige"}" visibility="hidden"/>
</svg>`;
this.select();
this.onclick = (evt) => this.toggle();
}
select(state = this.hasAttribute("selected")) {
this.querySelector("circle:nth-child(2)").setAttribute("visibility" , state ? "visible" :"hidden");
}
toggle(){
this.select( this.toggleAttribute("selected") );
}
})
</script>
<style>
svg-option {
--svg-option-size:180px;
width: var(--svg-option-size);
height: var(--svg-option-size);
cursor: pointer;
}
svg-option[selected]{
background:lightgreen;
}
svg-option:not([selected]){
background:pink;
}
</style>
<svg-option></svg-option>
<svg-option fill="red" selected></svg-option>
<svg-option fill="rebeccapurple" selected-fill="yellow" selected></svg-option>
I can change the top property of percent1 with
document.getElementById('percent1').style.top = '50px';
HTML:
<div class="box" id="box1">
<div class="percent" id="percent1">
<svg>
<circle cx="70" cy="70" r="70"></circle>
<circle cx="70" cy="70" r="70"></circle>
</svg>
<div class="num">
<h2>45<span>%</span></h2>
</div>
</div>
<h2 class="text">Percentage</h2>
</div>
CSS to modify:
.box .percent svg circle:nth-child(2)
{
stroke-dashoffset:calc(440 - (440 * 15) / 100);
}
How can I change "stroke-dashoffset" value when it's nested like this?
It would appear :nth-child targeting matches elements based upon their position, not on their properties so I think what you want isn't possible with this approach.
Could consider attaching some other type of targeting mechanism (either in HTML or JS) to target the element you want to style more granularly in CSS.
#percent1 {
position: absolute;
top: 50px;
}
#percent1>svg {
overflow: visible;
}
#percent1>svg>circle {
fill: blue;
}
#percent1>svg>circle:nth-child(2) {
fill: yellow;
}
#circle-target {
stroke-dashoffset: 100;
stroke: red;
stroke-width: 8px;
}
<div class="box" id="box1">
<div class="percent" id="percent1">
<svg>
<circle cx="70" cy="70" r="70"></circle>
<circle cx="70" cy="70" r="70" id="circle-target"></circle>
</svg>
</div>
You can do it with
document.querySelectorAll(".box .percent svg circle:nth-child(2)")
I am trying to create 4 svg based charts one below another.
After charts are loaded, I can see only 2 and half charts which get occupied on web browser without scrolling.
I can see scroll bars enabled in left and at the bottom but they don't scroll much.
<div overflow="auto">
<svg id="chart1" style="overflow-y:scroll"></svg>
<svg id="chart2" style="overflow-y:scroll"></svg>
<svg id="chart3" style="overflow-y:scroll"></svg>
<svg id="chart4" style="overflow-y:scroll"></svg>
</div>
Above are 4 svg and below is the css for each of them.
#chart1 {
width: 100%;
height: 100%;
position: absolute;
}
When I minimize the webpage, I can see 4 charts otherwise 2 and half only.
What all I have tried:
1. enabling auto-scroll for html, body
2. enabling scroll in svg (similar to above code).
3. increasing html and body height and width.
html, body {
width: 100%;
height: 200%;
margin: 0px;
padding: 0px;
}
Here is a example on jsfiddle, each svg has a data-no, and one common class. It is more easy with this example for you to explain what you expect exactly...
https://jsfiddle.net/ericsm/ondtxmp2/
and here the code too :
each svg take 100% of body.
<HTML>
<HEAD>
<style type="text/css">
.container-charts {
border:solid 8px blue;
div : 100%;
}
.chart {
width: 100%;
height: 100%;
border:dashed 2px green;
}
html, body {
margin: 0px;
padding: 0px;
}
</style>
</HEAD>
<BODY>
<div class="container-charts" overflow="auto">
<svg class="chart" data-no="1">
<ellipse cx="100" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" />
</svg>
<svg class="chart" data-no="2">
<ellipse cx="100" cy="80" rx="100" ry="50" style="fill:blue;stroke-width:2" />
</svg>
<svg class="chart" data-no="3">
<ellipse cx="100" cy="80" rx="100" ry="50" style="fill:gray;stroke-width:2" />
</svg>
<svg class="chart" data-no="3">
<ellipse cx="100" cy="80" rx="100" ry="50" style="fill:black;stroke-width:2" />
</svg>
</div>
</BODY>
</HTML>
I am creating a sliding sidebar menu for my WordPress site using only HTML/CSS/JavaScript. This is from a tutorial from YouTube and followed everything exactly. The issue is that when I click on the buttons, the error reads "Uncaught ReferenceError: openSlideMenu is not defined
at HTMLAnchorElement.onclick". I get the same error for the other button. See code below.
HTML (blog.php)
<nav class="navbar">
<div class="side-menu">
<span class="open-slide">
<a href="#" onclick="openSlideMenu()">
<svg width="30" height="30">
<path d="M0,5 30,5" stroke="#000" stroke-width="5" />
<path d="M0,14 30,14" stroke="#000" stroke-width="5" />
<path d="M0,23 30,23" stroke="#000" stroke-width="5" />
</svg>
</a>
</span>
</div>
</nav>
<div id="side-menu" class="side-nav">
×
<?php get_sidebar() ?>
</div>
<script type="text/javascript">
jQuery(document).ready(function(){
function openSlideMenu() {
document.getElementById('side-menu').style.width = '250px';
}
function closeSlideMenu() {
document.getElementById('side-menu').style.width = '0';
}
});
</script>
CSS
.side-nav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top:0;
left:0;
background-color: #111;
opacity: 0.9;
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
}
.side-nav a {
padding: 10px 10px 10px 30px;
text-decoration: none;
font-size:22px;
color: #ccc;
display: block;
transition: 0.3s;
}
.side-nav a:hover {
color: #fff;
}
.side-nav .btn-close {
position: absolute;
top: 0;
right: 22px;
font-size: 36px;
margin-left: 50px;
}
The tutorial seemed easy and simple, it should have worked without issues. I wonder could it be something WordPress related? I did all I could.
Since you are using jQuery, why don't you utilize it completely?
For more information on what could be the issue, I suggest you take a look at MarsAndBlack's comment
Meanwhile, I made some changes to your code to make use of jQuery fully.
Here I have added ids to both buttons. (Not necessary, but used for easy detection).
<nav class="navbar">
<div class="side-menu">
<span class="open-slide">
<a href="#" id="openmenu">
<svg width="30" height="30">
<path d="M0,5 30,5" stroke="#000" stroke-width="5" />
<path d="M0,14 30,14" stroke="#000" stroke-width="5" />
<path d="M0,23 30,23" stroke="#000" stroke-width="5" />
</svg>
</a>
</span>
</div>
</nav>
<div id="side-menu" class="side-nav">
×
</div>
Also changed JS to use jQuery for click function instead of vanilla JS,
jQuery(document).ready(function(){
jQuery('#openmenu').click(function() {
jQuery('#side-menu').css('width','250px');
});
jQuery('#closemenu').click(function() {
jQuery('#side-menu').css('width','0px');
});
});
Here is a working example