I'm trying to delete the corners of an img element:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">
<body>
<style type="text/css">
#div { background: #ffffff; width: 500px; height: 300px; padding: 10px; }
#div img { background: #000000; }
</style>
<div id="div"><img src="http://maps.google.com/maps/api/staticmap?center=40.714728,-73.998672&zoom=14&size=500x300&sensor=false" alt="" class="t" /></div>
<style>.t { clip-path: url(#c1); }</style>
<svg:svg height="0">
<svg:clipPath id="c1" clipPathUnits="objectBoundingBox">
<svg:polyline x="0" y="0" width="0.5" height="0.5" points="0,60 20,20 40, 100, 60,40, 80,100, 100,40 120,100" fill="red" stroke="black" />
</svg:clipPath>
</svg:svg>
</body>
</html>
But the image disapears?!
I wanted that the red marked areas will be "removed"/disapear and I don't get it work:
First, make sure your document is served as XHTML, not HTML. SVG clipping won't work otherwise. Fix your URL to use & instead of &.
Then, remove the clipPathUnits="objectBoundingBox" or you won't get absolute coordinates. Finally, fix your path by using the following points which should get the shape you need: 0,20 125,0 250,20 375,0 500,20 500,300 0,300.
The final document will look like this:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">
<body>
<style type="text/css">
#div { background: #ffffff; width: 500px; height: 300px; padding: 10px; }
#div img { background: #000000; }
</style>
<div id="div"><img src="http://maps.google.com/maps/api/staticmap?center=40.714728,-73.998672&zoom=14&size=500x300&sensor=false" alt="" class="t" /></div>
<style>.t { clip-path: url(#c1); }</style>
<svg:svg height="0">
<svg:clipPath id="c1">
<svg:polyline points="0,20 125,0 250,20 375,0 500,20 500,300 0,300" />
</svg:clipPath>
</svg:svg>
</body>
</html>
Related
So I am trying to make different texts next to specific symbols (in the elevator-pitch div) but somehow the element skip rows and text end up below the images. Ideally I want each text to be nicely aligned next to the images (hence making the float).
Here is the code: https://codepen.io/andreassoteriou/pen/PoaLBjv
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>AndreasSoteriouCV</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Dancing+Script&family=Merriweather&family=Montserrat&family=Pacifico&family=Playball&family=Playfair+Display&display=swap" rel="stylesheet">
</head>
<body>
<div class="top-container">
<img src="andreassoteriou-modified.png" alt="andreas">
<h1>Andreas Soteriou</h1>
<h2>aspiring web developer</h2>
</div>
<h1>My Story</h1>
<div class="elevator-pitch">
<img class="creativity-img" src="https://cdn-icons-png.flaticon.com/512/1126/1126453.png" alt="creativity">
<h2>Creativity</h2>
<p>Why I am creativfdfdfdfdfdfdfdwerv4vrtyvrtyvrtyvyrytve</p>
</div>
<hr>
<div class="elevator-pitch">
<img class="logical-img" src="https://cdn-icons-png.flaticon.com/128/1935/1935467.png" alt="logical">
<h2>Logical</h2>
<p>Why I am creativggggfgotjgirtgfdffdffdfdfdfdfdfd</p>
</div>
<div class="story-container">
</div>
</body>
</html>
body {
margin: 0;
font-family: 'Merriweather', serif;
text-align: center;
}
.top-container {
background-color: #F8EDE3;
margin: 0;
height: 450px;
padding-top: 60px;
}
.top-container > h1 {
margin-top:40px;
font-size: 40px;
}
.top-container > h2 {
font-family: 'Dancing script', serif;
font-size: 30px;
}
.middle-container {
}
.elevator-pitch {
width: 25%;
text-align: left;
line-height: 1.5;
margin: 50px auto 50px auto;
overflow:auto;
}
.creativity-img {
float: left;
margin-right: 20px;
width: 30%;
}
.logical-img {
float: right;
width: 30%;
margin-left: 20px;
any idea on how I should tackle this? Most importantly, very curious as to why this happens!
Best regards,
Andreas
I was expecting the text to be nicely aligned next to the image as in the udemy course I am doing now:
I have a page that looks like this
The width of the datetimepicker that you see on the picture cant get any smaller.
So what happends when the width is over 1200 px and under about 1550 px is that the datepicker goes outside of its place like this:
When the width is 1550 px or over the width is wide enough to fit the datetimepicker
And when the width is below 1200 the responsiveness kicks in and makes the page look good like this
So what i need help with is how to set for the responsiveness to kick in att 1550 instead of 1200. Is this possible, if yes how?
you can also fix overflow content like this
.button-container {
padding-left: 0;
list-style: none;
display: -webkit-box;
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
-webkit-box-align: baseline;
align-items: baseline;
margin-bottom: 30px;
}
.button-container {
max-width: 300px;
}
.button-wrapper {
background-color: lightblue;
flex-shrink: 0;
}
.button-wrapper button{
padding:5px 15px;
border-radius:5px;
border:1px solid #000;
margin:10px;
}
.button-container::-webkit-scrollbar {
width: 2px;
height:8px;
}
button-container::-webkit-scrollbar-track {
box-shadow: inset 0 0 2px grey;
border-radius: 0px;
}
.button-container::-webkit-scrollbar-thumb {
background: #ff9b51;
border-radius: 0px;
}
.button-container::-webkit-scrollbar-thumb:hover {
background: gray;
}
<!-- Meta View Port -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<!-- Jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- FontAwesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="button-container">
<div class="button-wrapper">
<button type="button" class="btn-default">Range</button>
<button type="button" class="btn-default">Week</button>
<button type="button" class="btn-default">Month</button>
<button type="button" class="btn-default">Quarter</button>
<button type="button" class="btn-default">Year</button>
</div>
</div>
You can easily add custom 'breakpoints' to your css in the form of a media query.
#media only screen and (max-width: 1550px) {
// type your styles here
// set your content to be vertically aligned
}
Let me know if this helps :)
The Goal
I'm trying to implement this…
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="https://d3plus.org/js/d3.js"></script>
<script src="https://d3plus.org/js/d3plus.js"></script>
<style>
html {
height: 100%;
}
body {
margin: 0;
height: 100%;
background: linear-gradient(to top, #ddfdff, #6DD5FA, #2980B9);
}
svg {
font-family: "Helvetica", "Arial", sans-serif;
height: 100%;
width: 100%;
background: transparent;
}
.type {
fill: #888;
text-anchor: middle;
}
.shape {
fill: red;
stroke: black;
}
.invis {
fill: transparent;
stroke: transparent;
}
.title {
fill: #ffebeb;
}
</style>
</head>
<body>
<svg>
<path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M584.924 352C566.379 596.253 442.233 717.371 312.762 721.625C314.849 722.912 315.945 724.404 315.439 725.873C314.85 727.582 313.363 728.819 311.349 729.634C313.835 731.14 315.947 732.306 317.185 732.541C324.33 733.901 329.242 736.83 328.72 740.738C326.639 756.297 285.436 758.859 279.246 744.483C277.43 740.263 282.545 736.546 290.185 734.22C291.876 733.706 291.976 731.183 291.936 728.476C288.699 727.054 286.268 725.043 285.663 722.579C285.504 721.933 285.607 721.353 285.928 720.839C157.97 709.163 31.5609 584.211 2.92421 352C-23.4665 138 133.209 0 293.924 0C454.639 0 600.034 153 584.924 352Z" fill="#C80E0E"/>
<!-- 'd3plus' uses this circle as a text mask. -->
<!-- Honestly, I don't fully understand how this works; -->
<!-- Changing the circle's radius yields strange effects. -->
<circle class="shape invis" r="15px" cx="0px" cy="0px"></circle>
<text id="circleResize" class="wrap title" x="0px" y="110px" font-size="2rem">
Why is it so difficult to center text in a shape like this while specifying curved outer bounds?
</text>
</svg>
<script>
// Wrap text in a circle, and size the text to fit.
d3plus.textwrap()
.container(d3.select("#circleResize"))
.width(620)
.height(1000)
.resize(true)
.draw();
</script>
</body>
</html>
…in Svelte.
The Problem
I can't seem to get d3plus to work with Svelte.
First I tried using <svelte:head> to house the <script src="https://d3plus.org… lines. I don't recall what happened when I tried that, but my hunch is that <svelte:head> only works with CSS, or other files whose content doesn't need to be parsed by Svelte. ¯_(ツ)_/¯?
At any rate, my next approach is represented (in part) below. I first saved d3.js and d3plus.js in src, then, as shown, I import the symbols directly.
In this second scenario, though, I keep getting this console error:
Uncaught TypeError: Cannot read property 'document' of undefined
at d3.js:8
at d3.js:9553
at createCommonjsModule (index.mjs:1328)
at index.mjs:1328
at main.js:8
Presumably what's happening here is that the d3 source is getting run before the app's had a chance to load, and so document remains undefined? Regardless, I'm stuck!
Here's the (broken) code, fwiw:
<script>
import d3 from './d3.js';
import d3plus from './d3plus.js'
d3plus.textwrap()
.container(d3.select("#circleResize"))
.resize(true)
.draw();
</script>
<style>
svg {
font-family: "Helvetica", "Arial", sans-serif;
height: 100%;
width: 100%;
background: transparent;
}
.type {
fill: #888;
text-anchor: middle;
}
.shape {
fill: red;
stroke: black;
}
.invis {
/* Fill will be transparent in final outlay */
fill: #10ef3394;
stroke: transparent;
stroke-width: .1rem;
}
.title {
fill: #ffebeb;
}
</style>
<svg>
<path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M584.924 352C566.379 596.253 442.233 717.371 312.762 721.625C314.849 722.912 315.945 724.404 315.439 725.873C314.85 727.582 313.363 728.819 311.349 729.634C313.835 731.14 315.947 732.306 317.185 732.541C324.33 733.901 329.242 736.83 328.72 740.738C326.639 756.297 285.436 758.859 279.246 744.483C277.43 740.263 282.545 736.546 290.185 734.22C291.876 733.706 291.976 731.183 291.936 728.476C288.699 727.054 286.268 725.043 285.663 722.579C285.504 721.933 285.607 721.353 285.928 720.839C157.97 709.163 31.5609 584.211 2.92421 352C-23.4665 138 133.209 0 293.924 0C454.639 0 600.034 153 584.924 352Z" fill="#C80E0E"/>
<circle class="shape invis" r="15px" cx="0px" cy="0px"></circle>
<text id="circleResize" class="wrap title" x="0px" y="110px" font-size="2rem">
Why is it so difficult to center text in a shape like this while specifying curved outer bounds?
</text>
</svg>
How can I get this working in Svelte??? 🥴
Working code
(With 👏 to #CD.. here on S.O., and #primos on Discord for their help!)
📝 The range slider and bound variables are just a bit of reactive fun to test moving the text and balloon together.
/public/index.html
<!doctype html>
<html>
<head>
<meta charset='utf8'>
<meta name='viewport' content='width=device-width'>
<title>Svelte app</title>
<link rel='icon' type='image/png' href='/favicon.png'>
<link rel='stylesheet' href='/global.css'>
<link rel='stylesheet' href='/bundle.css'>
<script src="https://d3plus.org/js/d3.js"></script> <!-- 👈 -->
<script src="https://d3plus.org/js/d3plus.js"></script> <!-- 👈 -->
<script defer src='/bundle.js'></script>
</head>
<body>
</body>
</html>
App.svelte
<script>
import { onMount } from 'svelte'; // 👈
onMount(() => { // 👈
d3plus.textwrap()
.container(d3.select("#circleResize"))
.resize(true)
.draw();
});
export let name;
let i = 0;
const minX = 293;
let windowWidth;
let skyHeight;
</script>
<svelte:window bind:innerWidth={windowWidth}/>
<style>
svg {
font-family: "Helvetica", "Arial", sans-serif;
height: 90%;
width: 100%;
background: transparent;
}
.type {
fill: #888;
text-anchor: middle;
}
.shape {
fill: red;
stroke: black;
}
.invis {
fill: transparent;
stroke: transparent;
stroke-width: .1rem;
}
.title {
fill: #ffebeb;
}
</style>
<label>
<input type="range" bind:value={i} max={windowWidth - (2 * minX)}>
</label>
<div>{i}</div>
<svg>
<path id="Union" fill-rule="evenodd" clip-rule="evenodd" transform="translate({i},0)" d="M584.924 352C566.379 596.253 442.233 717.371 312.762 721.625C314.849 722.912 315.945 724.404 315.439 725.873C314.85 727.582 313.363 728.819 311.349 729.634C313.835 731.14 315.947 732.306 317.185 732.541C324.33 733.901 329.242 736.83 328.72 740.738C326.639 756.297 285.436 758.859 279.246 744.483C277.43 740.263 282.545 736.546 290.185 734.22C291.876 733.706 291.976 731.183 291.936 728.476C288.699 727.054 286.268 725.043 285.663 722.579C285.504 721.933 285.607 721.353 285.928 720.839C157.97 709.163 31.5609 584.211 2.92421 352C-23.4665 138 133.209 0 293.924 0C454.639 0 600.034 153 584.924 352Z" fill="#C80E0E"/>
<circle class="shape invis" r="280px" cx="{minX}" cy="300px"></circle>
<text id="circleResize" class="wrap title" x="0px" y="110px" font-size="2rem" transform="translate({i},0)">
Why is it so difficult to center text in a shape like this while specifying curved outer bounds?
</text>
</svg>
I have an array of svg objects that I need to use. Each svg is inserted at two different sections of the HTML when the page is loaded and only one section is displayed at a given time. I use the display property and media queries to hide/unhide the complete section containing the SVGs and other tags.
Each SVG have at least two parts (A/B); part A is a single color but part B use a LinearGradient for Fill.
This method works fine in Chrome, and IE explorer but Firefox does not display part B of the SVG when the media query is called.
I tried changing the id of the linearGradient url to a class, removed the tags, use the and tags, changed the display property types, but nothing worked.
This is simplyfied version of the problem:
https://codepen.io/eddieWin/pen/JOoMLe
Thanks for any help you can give me.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style type="text/css">
#one{
display: block;
}
#two{
display: none;
}
.svgIcon{
display: inline-block;
border: 2px solid red;
}
#container{
display: flex;
}
#media screen and (min-width: 568px) {
#one{
display: none;
}
#two{
display: block;
}
}
</style>
</head>
<body>
<section id="one">
<h1>One</h1>
<div class="svgContainer"></div>
</section>
<section id="two">
<div id="container">
<div>
<div class="svgContainer"></div>
</div>
<h1>Two</h1>
</div>
</section>
<script type="text/javascript">
var svgIcons = {
'svg1' : '\
<div class="svgIcon">\
<svg version="1.1" class="infoIcon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\
width="72px" height="70px" viewBox="0 0 72 70">\
<defs>\
<linearGradient id="info_1_" gradientUnits="userSpaceOnUse" x1="32.895" y1="49.7476" x2="32.895" y2="28.2964">\
<stop offset="0" style="stop-color:#ff88ff"/>\
<stop offset="1" style="stop-color:#88dddd"/>\
</linearGradient>\
</defs>\
<circle cx="35" cy="35" r="30" fill="#555555"/>\
<circle cx="35" cy="35" r="20" fill="url(#info_1_)"/>\
</svg>\
</div>'
}
var svgContainers = document.getElementsByClassName('svgContainer');
for(var i = 0; i < svgContainers.length; i++){
svgContainers[i].innerHTML = svgIcons['svg1'];
}
</script>
</body>
</html>
So I plan on making this really long image, its small right now, but I increased the height out to how long I expected it to be. Here's my code so far:
<!doctype html>
<meta charset="utf-8">
<head>
<style>
body {background-color: black}
.image {background-image: url('http://i.imgur.com/JrsEkO9.jpg');
width: 640px;
height: 25000px;
position: absolute;
left: 50%;
top: 40%;
margin:-228px 0 0 -400px;
repeat-x: no;
-webkit-background-size: 640px 25000px;
min-width: 640px;
min-height: 25000px;}
</style>
</head>
<html>
<body>
<div class="image">
</div>
</html>
</body>
It looks like I was hoping it would on a desktop, but when opened on an ipad the image is fuzzy. Any suggestions? Here's a link to see the problem: http://bit.ly/HrG9oc