How to generate an SVG which can be loaded into Draw.io as a result of SVG rather than an image - draw.io

I can export SVG from draw.io and import the exported SVG back to draw.io. All the drawing are there and no change.
When I created SVG using my application, and import to draw.io as SVG, the result in draw.io is a image.
So my question what requirements or specification are for the SVG data file?
The draw.io created and exported SVG code is
<?xml version="1.0" encoding="UTF-8"?>
<!-- Do not edit this file with editors other than diagrams.net -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="411px" height="61px" viewBox="-0.5 -0.5 411 61" content="<mxfile host="app.diagrams.net" modified="2022-08-22T02:59:40.981Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36" etag="pmg8Z2ktDU24ZLY4ORp9" version="20.0.4" type="google"><diagram id="FAU_EnfAKAzyiIyvcy6L" name="Page-1">jZJNb8MgDIZ/DcdJCVSlvSb92GE9ZdLOKHgBiYSU0ibZrx9ZnC9VlSZxsB8bY7+YsLRsz07U6mIlGEIj2RJ2IJTGG0pJfyLZDYTvEBROS0yaQaZ/AGGE9K4l3FaJ3lrjdb2Gua0qyP2KCedss077tmb9ai0KeAJZLswz/dLSK6Txdj8H3kEXCp/eUT4ESjEm4yQ3JaRtFogdCUudtX6wyjYF04s36jLcO72ITo05qPx/LnzuDzwp2aXh59P1wRJ7/eBvm6HKQ5g7DozN+m5UoFHaQ1aLvPeb8MuEJcqXJnhxMLEAOA/ty87iad6wKGBL8K4LKXiBMpQId4Rx9JtZ8c24EGoh9haZwE8uptKzDsFAKUZ3lvwvtlhcdvwF</diagram></mxfile>" style="background-color: rgb(255, 255, 255);"><defs/><g><rect x="0" y="0" width="410" height="60" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/></g></svg>
My SVG code is and it's image when imported into draw.io as SVG.
<svg viewBox="0 0 5000 3000" content="<mxfile host="app.diagrams.net" modified="2022-08-22T02:59:40.981Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36" etag="pmg8Z2ktDU24ZLY4ORp9" version="20.0.4" type="google"><diagram id="FAU_EnfAKAzyiIyvcy6L" name="Page-1">jZJNb8MgDIZ/DcdJCVSlvSb92GE9ZdLOKHgBiYSU0ibZrx9ZnC9VlSZxsB8bY7+YsLRsz07U6mIlGEIj2RJ2IJTGG0pJfyLZDYTvEBROS0yaQaZ/AGGE9K4l3FaJ3lrjdb2Gua0qyP2KCedss077tmb9ai0KeAJZLswz/dLSK6Txdj8H3kEXCp/eUT4ESjEm4yQ3JaRtFogdCUudtX6wyjYF04s36jLcO72ITo05qPx/LnzuDzwp2aXh59P1wRJ7/eBvm6HKQ5g7DozN+m5UoFHaQ1aLvPeb8MuEJcqXJnhxMLEAOA/ty87iad6wKGBL8K4LKXiBMpQId4Rx9JtZ8c24EGoh9haZwE8uptKzDsFAKUZ3lvwvtlhcdvwF</diagram></mxfile>" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" transform="scale(1,-1)" tabindex="0"><g><rect class="rectStyle" x="0" y="45" width="45" height="2360"><title>x: 0; y: 0; width: 45; height:2360</title></rect><rect class="rectStyle" x="1955" y="45" width="45" height="2360"><title>x: 1955; y: 1955; width: 45; height:2360</title></rect><rect class="rectStyle" x="355" y="45" width="45" height="2360"><title>x: 355; y: 355; width: 45; height:2360</title></rect><rect class="rectStyle" x="710" y="45" width="45" height="2360"><title>x: 710; y: 710; width: 45; height:2360</title></rect><rect class="rectStyle" x="1065" y="45" width="45" height="2360"><title>x: 1065; y: 1065; width: 45; height:2360</title></rect><rect class="rectStyle" x="1420" y="45" width="45" height="2360"><title>x: 1420; y: 1420; width: 45; height:2360</title></rect><rect class="rectStyle" x="1775" y="45" width="45" height="2360"><title>x: 1775; y: 1775; width: 45; height:2360</title></rect><rect class="rectStyle" x="45" y="845" width="310" height="45"><title>x: 45; y: 45; width: 310; height:45</title></rect><rect class="rectStyle" x="45" y="1645" width="310" height="45"><title>x: 45; y: 45; width: 310; height:45</title></rect><rect class="rectStyle" x="400" y="845" width="310" height="45"><title>x: 400; y: 400; width: 310; height:45</title></rect><rect class="rectStyle" x="400" y="1645" width="310" height="45"><title>x: 400; y: 400; width: 310; height:45</title></rect><rect class="rectStyle" x="755" y="845" width="310" height="45"><title>x: 755; y: 755; width: 310; height:45</title></rect><rect class="rectStyle" x="755" y="1645" width="310" height="45"><title>x: 755; y: 755; width: 310; height:45</title></rect><rect class="rectStyle" x="1110" y="845" width="310" height="45"><title>x: 1110; y: 1110; width: 310; height:45</title></rect><rect class="rectStyle" x="1110" y="1645" width="310" height="45"><title>x: 1110; y: 1110; width: 310; height:45</title></rect><rect class="rectStyle" x="1465" y="845" width="310" height="45"><title>x: 1465; y: 1465; width: 310; height:45</title></rect><rect class="rectStyle" x="1465" y="1645" width="310" height="45"><title>x: 1465; y: 1465; width: 310; height:45</title></rect><rect class="rectStyle" x="1820" y="845" width="135" height="45"><title>x: 1820; y: 1820; width: 135; height:45</title></rect><rect class="rectStyle" x="1820" y="1645" width="135" height="45"><title>x: 1820; y: 1820; width: 135; height:45</title></rect><rect class="rectStyle" x="0" y="2405" width="2000" height="45"><title>x: 0; y: 0; width: 2000; height:45</title></rect><rect class="rectStyle" x="0" y="0" width="2000" height="45"><title>x: 0; y: 0; width: 2000; height:45</title></rect></g><g id="line"></g><line x1="3150.09375" y1="2450" x2="3250.09375" y2="2450" stroke="red" stroke-width="5"></line></svg>


The SVG+XML format has the full drawio data model embedded within it. The SVG isn't used to load the diagram back up.

Related

video not working on mobile and is not centered from marker (AR.js)

I have several problems, the first one: when you hover over the marker, the video is not displayed on mobile devices, I just see a black square and that's it.
The second problem is that I am unable to stretch the a-video to the full width of the marker and position it in the center.
Thank you all in advance!
My code:
<script src="https://cdn.jsdelivr.net/gh/aframevr/aframe#1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>
<script>
window.onload = function() {
AFRAME.registerComponent("videohandler", {
init: function() {
var marker = this.el;
this.vid = document.querySelector("#vid");
this.vid.pause();
marker.addEventListener(
"markerFound",
function() {
this.vid.play();
}.bind(this)
);
marker.addEventListener(
"markerLost",
function() {
this.vid.pause();
this.vid.currentTime = 0;
}.bind(this)
);
}
});
};
</script>
<style>
.arjs-loader {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.8);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
.arjs-loader div {
text-align: center;
font-size: 1.25em;
color: white;
}
</style>
<body style="margin : 0px; overflow: hidden;">
<div class="arjs-loader">
<div>Loading, please wait...</div>
</div>
<a-scene
vr-mode-ui="enabled: false;"
renderer="antialias: true; alpha: true; precision: mediump;"
arjs="trackingMethod: best; sourceType: webcam; debugUIEnabled: false;"
>
<a-assets>
<video
src="https://cdn.glitch.com/8383ce4d-10be-4440-a143-97d71674e0a3%2FHARU%20%E2%80%93%20%D0%92%D0%9A%D0%98%D0%9D%D0%9E%20(Mood%20Video).mp4?v=1630088605215"
preload="auto"
id="vid"
response-type="arraybuffer"
loop
crossorigin
webkit-playsinline
autoplay
playsinline
></video>
</a-assets>
<a-nft
videohandler
type="nft"
class="nft"
url="https://cdn.glitch.com/8383ce4d-10be-4440-a143-97d71674e0a3%2Fnar"
smooth="true"
smoothcount="10"
smoothtolerance="0.01"
smooththreshold="5"
raycaster="objects: .clickable"
>
<a-video
src="#vid"
scale="1 1 1"
position="0 0.1 0"
rotation="-90 0 0"
class="clickable"
gesture-handler
width="208"
height="208"
>
</a-video>
</a-nft>
<a-entity camera></a-entity>
</a-scene>
</body>

How to fix transition of transform on IE with property: transform: scaleX(-1) translateY(-50%);

[enter image description here][1]
[1]: the image of the button
[2] There are styles for this button. Please looking at the line (.btnDefault:hover:after).
.btnDefault {
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
padding: 0 46px 0 25px;
background-color: #fff;
width: 160px;
height: 48px;
font-size: 16px;
letter-spacing: 2px;
text-align: center;
border-radius: 50px;
box-shadow: 0px 12px 51px 0px rgba(88, 49, 33, .4);
transition: opacity .3s ease-in-out;
}
.btnDefault:after {
content: '';
position: absolute;
top: 50%;
right: 25px;
width: 22px;
height: 22px;
background: url('https://i.stack.imgur.com/pPcvP.png') no-repeat;
background-size: contain;
transform: translateY(-50%);
transition: transform .3s ease-in-out;
}
.btnDefault:hover {
opacity: .7;
}
.btnDefault:hover:after {
transform: scaleX(-1) translateY(-50%);
}
[3] this is button HTML
<a class="btnDefault">VIEW MORE</a>

Is there any analogue of flexbox in Qt?

I create widget with answers which can be chosen by user and I want to place them like this: https://jsfiddle.net/yxs1bmq6/1/
Change the window size and look at the boxes.
Is there any simple way to do layout working like this?
html:
<div class="container">
<div class="box">
box1
</div>
<div class="box">
box2
</div>
...
</div>
css:
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
align-content: space-around;
background-color: aqua;
height: 500px;
}
.box {
background-color: green;
padding: 50px;
}

Yes, it is. I wrote a set of bindings to the Yoga layout engine. Using flexboxes is much easier than standard Qt Quick layout tools. Published a source code here.
import QtQuick 2.5
import QtQuick.Window 2.0
Window {
visible: true
height: 400
width: 675
Rectangle {
anchors.fill: parent
color: "cyan"
Flex {
height: parent.height
width: parent.width
flexDirection: "row"
flexWrap: "wrap"
justifyContent: "spaceAround"
alignItems: "center"
alignSelf: "center"
alignContent: "stretch"
Rectangle { color: "green"; height: 150; width: 150 }
Rectangle { color: "green"; height: 150; width: 150 }
Rectangle { color: "green"; height: 150; width: 150 }
Rectangle { color: "green"; height: 150; width: 150 }
Rectangle { color: "green"; height: 150; width: 150 }
Rectangle { color: "green"; height: 150; width: 150 }
Rectangle { color: "green"; height: 150; width: 150 }
}
}
}

Looks like it is possble to do something with QML's grids and their flow properties.

CSS3 hovering out transition effect

Hello guys im having a hard time configuring out what is the missing part of my css, because the animation in hover out is not the same in hover in, here is the fiddle link thank you.
[https://jsfiddle.net/m2Lz4euv/][1]

You need to apply the timing properties in the not-hover selectors.
jsFiddle
What I've done is changing this:
.hamburger-wrap span:first-of-type {
top: 0;
}
.hamburger-wrap:hover span:first-of-type{
top: 12px;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari */
transform: rotate(45deg);
transition-property: top, transform;
transition-duration: .3s, .3s;
transition-delay: 0s, .1s;
}
To this:
.hamburger-wrap span:first-of-type {
top: 0;
transition-property: top, transform;
transition-duration: .3s, .3s;
transition-delay: 0s, .1s;
}
.hamburger-wrap:hover span:first-of-type{
top: 12px;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari */
transform: rotate(45deg);
}
If you want different timing for the in- and out state you can set the in-timing in the :hover selector and the out-timing in the regular selector.

HOVER FIDDLE DEMO
* {
margin: 0;
padding: 0;
}
/* Icon 1 */
#nav-icon1, #nav-icon2, #nav-icon3, #nav-icon4 {
width: 60px;
height: 45px;
position: relative;
margin: 50px auto;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#nav-icon1 span, #nav-icon3 span, #nav-icon4 span {
display: block;
position: absolute;
height: 9px;
width: 100%;
background: #d3531a;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icon1 span:nth-child(1) {
top: 0px;
}
#nav-icon1 span:nth-child(2) {
top: 18px;
}
#nav-icon1 span:nth-child(3) {
top: 36px;
}
#nav-icon1:hover span:nth-child(1) {
top: 18px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
#nav-icon1:hover span:nth-child(2) {
opacity: 0;
left: -60px;
}
#nav-icon1:hover span:nth-child(3) {
top: 18px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
/* Icon 3 */
#nav-icon3 span:nth-child(1) {
top: 0px;
}
#nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) {
top: 18px;
}
#nav-icon3 span:nth-child(4) {
top: 36px;
}
#nav-icon3:hover span:nth-child(1) {
top: 18px;
width: 0%;
left: 50%;
}
#nav-icon3:hover span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#nav-icon3:hover span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav-icon3:hover span:nth-child(4) {
top: 18px;
width: 0%;
left: 50%;
}
/* Icon 4 */
#nav-icon4 {
}
#nav-icon4 span:nth-child(1) {
top: 0px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon4 span:nth-child(2) {
top: 18px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon4 span:nth-child(3) {
top: 36px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon4:hover span:nth-child(1) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: -3px;
left: 8px;
}
#nav-icon4:hover span:nth-child(2) {
width: 0%;
opacity: 0;
}
#nav-icon4:hover span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 39px;
left: 8px;
}
<div id="nav-icon1">
<span></span>
<span></span>
<span></span>
</div>
<div id="nav-icon3">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div id="nav-icon4">
<span></span>
<span></span>
<span></span>
</div>

How to set height to 100% of element with position fixed depending on its wrapper height

Here is the Fiddle Link
.homeFirstSection {
float: left;
width: 100%;
height: 500px;
position: relative;
}
.home_left_bar {
float: left;
background: #f67777;
width: 4%;
height: 100%;
z-index: 5;
position: fixed;
}
How I can set the height of fixed part to height of its wrap?

Found a very simple solution only setting the css height to inherit.Here is the Fiddle and Code
.homeFirstSection {
float: left;
width: 100%;
height: 200px;
position: relative;
}
.home_left_bar {
float: left;
background: #f67777;
width: 4%;
height: inherit;
z-index: 5;
position: fixed;
}