Related
I'm trying to understand if it is how it can be possible to convert the animations of the following svg that greensock uses, using only the css code.
In the following example, I don't know why, only the animation of the browser and scrollbar seems to work, which scroll.
That of the terminal that opens and the code that you write on your own doesn't seem to work.
So the question is would it be possible to convert the following example which uses animations only using css.
Can you give me some suggestions?
(function() {
let illustration = document.querySelector('.Illustration');
if (!illustration) {
return;
}
const computer = gsap.timeline({
scrollTrigger: {
trigger: '.Illustration',
toggleActions: 'play none none none',
end: '+=10' // end after scrolling 500px beyond the start
}
});
computer
.to(
'#cursor',
{
repeat: 20,
keyframes: [
{
opacity: 0,
duration: 0.01,
delay: 0.4
},
{
opacity: 1,
duration: 0.01,
delay: 0.4
}
]
},
0
)
.from(
'.line',
{
scaleX: 0,
ease: Sine.easeOut,
stagger: {
duration: 3,
amount: 3
}
},
0
)
.to(
'#website',
{
ease: Sine.easeInOut,
yPercent: -60,
duration: 4
},
1
)
.to(
'#scrollbar',
{
ease: Sine.easeInOut,
yPercent: 260,
duration: 4
},
1
)
.to(
'#iterm',
{
opacity: 1,
delay: -0.1,
duration: 0.01
},
2
)
.from(
'#iterm',
{
ease: Elastic.easeOut.config(0.17, 0.2),
transformOrigin: '50% 50%',
y: 60,
x: -20,
duration: 1,
scale: 0
},
2
)
.fromTo(
'.steam',
{
opacity: 1,
drawSVG: '0%'
},
{
drawSVG: '100%',
duration: 3,
stagger: {
each: 0.5
}
},
2
)
.to(
'.steam',
{
opacity: 0,
duration: 4,
stagger: {
each: 0.5
}
},
3
);
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/gsap.min.js"></script>
<script src="https://pastebin.com/raw/ywciu18p"></script>
<script src="https://pastebin.com/raw/u7GLGbfu"></script>
<svg
xmlns="http://www.w3.org/2000/svg" class="Illustration Hero__svg" preserveAspectRatio="xMinYMin meet" viewBox="120 200 300 288" width="300px" height="288px">
<defs>
<clipPath id="clippy">
<rect x="133.98" y="248.2" width="52.38" height="81.84" fill="none"></rect>
</clipPath>
<clipPath id="screen">
<rect x="128.39" y="240.73" width="184.29" height="95.74" fill="none"></rect>
</clipPath>
</defs>
<g style="isolation:isolate">
<g id="_1" data-name="1">
<rect id="shelf" x="10.16" y="266.81" width="99.83" height="4.23" fill="#404040"></rect>
<rect id="desk" x="37.83" y="380.3" width="282" height="10" rx="5" fill="#404040"></rect>
<g id="coffee">
<path d="M90.8 362a.87.87 0 01-1.74 0 2.14 2.14 0 00-.27-.89 3.33 3.33 0 00-.91-1.11 1.87 1.87 0 00-1.16-.41 1.79 1.79 0 00-.72.2l-.16.09a2.23 2.23 0 00-1 1.61 4.56 4.56 0 00.58 2.75c.08.16.18.34.29.52a17.28 17.28 0 002.71 3c1.79 1.72 3.65 3.51 4.2 6a.87.87 0 11-1.69.38c-.44-1.95-2.11-3.55-3.71-5.1a18.07 18.07 0 01-3-3.38c-.12-.2-.24-.41-.35-.63a6.31 6.31 0 01-.75-3.82 4 4 0 011.85-2.83l.28-.15a3.5 3.5 0 011.46-.39 3.6 3.6 0 012.25.76 5 5 0 011.41 1.71 4 4 0 01.43 1.69z" fill="#cc7d96"></path>
<path d="M107.54 356.89c.08 4.69-1.07 19.42-4.84 23.22h-8.08c-3.77-3.8-4.92-18.53-4.84-23.22z" fill="#dd859c" fill-rule="evenodd"></path>
<path opacity="0" class="steam" d="M99.48,350.34c-.56-.56-3-3.52,0-6.2s1.93-3.76.11-6.19" fill="none" stroke="#d1d1d1" stroke-linecap="round" stroke-miterlimit="10" style="opacity: 1; stroke-dashoffset: 16.4006; stroke-dasharray: 0px, 999999px;"></path>
<path opacity="0" class="steam" d="M103.68,354.83c-.56-.56-3-3.52,0-6.19s1.93-3.76.11-6.2" fill="none" stroke="#d1d1d1" stroke-linecap="round" stroke-miterlimit="10" style="opacity: 1; stroke-dashoffset: 16.4011; stroke-dasharray: 0px, 999999px;"></path>
<path opacity="0" class="steam" d="M93.57,354.83c-.57-.56-3-3.52,0-6.19s1.92-3.76.1-6.2" fill="none" stroke="#d1d1d1" stroke-linecap="round" stroke-miterlimit="10" style="opacity: 1; stroke-dashoffset: 15.4049; stroke-dasharray: 0px, 999999px;"></path>
</g>
<g id="pc">
<polygon points="238.13 377.72 235.66 361.98 205.21 361.98 202.74 377.72 238.13 377.72" fill="#d2cfd6"></polygon>
<path d="M124.59 363.8a3.31 3.31 0 01-3.3-3.31v-18.76h198.29v18.76a3.32 3.32 0 01-3.31 3.31z" fill="#fff"></path>
<path d="M319.33 342v18.51a3.06 3.06 0 01-3.06 3.06H124.59a3.06 3.06 0 01-3-3.06V342h197.74m.5-.5H121v19a3.56 3.56 0 003.55 3.56h191.72a3.56 3.56 0 003.56-3.56v-19z" fill="#404040"></path>
<path d="M314.36 234.24H126.51a5.45 5.45 0 00-5.47 5.43v103.2h198.79v-103.2a5.45 5.45 0 00-5.47-5.43z" fill="#404040"></path>
<rect x="128.39" y="240.73" width="184.29" height="95.74" fill="#e3d1e5"></rect>
<rect x="188.3" y="377.72" width="64.27" height="2.36" fill="#eaeaea"></rect>
<ellipse cx="220.43" cy="353.63" rx="3.84" ry="3.81" fill="#333"></ellipse>
<g clip-path="url(#screen)">
<g id="vs-code">
<rect x="193.2" y="240.73" width="119.55" height="95.74" fill="#565266"></rect>
<rect x="193.2" y="240.73" width="119.55" height="6.45" fill="#b0baea"></rect>
<ellipse cx="198.98" cy="243.95" rx="1.4" ry="1.38" fill="#e84d4d"></ellipse>
<ellipse cx="204.19" cy="243.95" rx="1.4" ry="1.38" fill="#f2dd77"></ellipse>
<ellipse cx="209.14" cy="243.95" rx="1.4" ry="1.38" fill="#4eb785"></ellipse>
<g fill="#706d84">
<path d="M200.08 252.61c1.17-.07 1.49-.16 1.49-.37s-.33-.43-1.24-.55v-.34l1.11-.86h-1.3v-.68h2.05l.06.68-1.06.8c.83.18 1.15.51 1.15.9 0 .6-.67 1.05-2.21 1.13zM203.13 253.24l-.07-.61c1-.7 1.5-1.16 1.5-1.61s-.32-.5-1.4-.53l.07-.72c1.63 0 2.11.46 2.11 1s-.5 1.14-1.32 1.76h1.39v.67zM200.08 259.26c1.17-.07 1.49-.17 1.49-.38s-.33-.42-1.24-.54V258l1.11-.87h-1.3v-.67h2.05l.06.67-1.06.81c.83.17 1.15.51 1.15.89 0 .61-.67 1.06-2.21 1.14zM203.13 259.89l-.07-.61c1-.71 1.5-1.16 1.5-1.61s-.32-.5-1.4-.53l.07-.73c1.63 0 2.11.47 2.11 1s-.5 1.15-1.32 1.77h1.39v.67zM200.08 265.91c1.17-.07 1.49-.17 1.49-.38s-.33-.42-1.24-.54v-.34l1.11-.87h-1.3v-.67h2.05l.06.67-1.06.81c.83.17 1.15.51 1.15.89 0 .61-.67 1.06-2.21 1.14zM205.23 266v.59h-.73V266h-1.44a11.57 11.57 0 01.33-2.88l.84.05-.55 2.16h.82v-1.13l.73-.08v1.16h.37l-.07.67zM200.08 272.56c1.17-.08 1.49-.17 1.49-.38s-.33-.43-1.24-.54v-.35l1.11-.86h-1.3v-.68h2.05l.06.68-1.06.81c.83.17 1.15.51 1.15.89 0 .6-.67 1.06-2.21 1.13zM203.17 273.27v-.72c1.17-.09 1.53-.2 1.53-.49s-.39-.42-1.44-.54l.11-1.77h2l-.06.69H204v.59c1.11.17 1.44.56 1.44 1-.04.63-.7 1.15-2.27 1.24zM200.08 279.2c1.17-.07 1.49-.16 1.49-.37s-.33-.43-1.24-.55v-.34l1.11-.86h-1.3v-.68h2.05l.06.68-1.06.81c.83.17 1.15.51 1.15.89 0 .6-.67 1.05-2.21 1.13zM203 278.55c0-1 .56-1.73 1.83-2.27l.32.65c-.84.31-1.19.61-1.33 1 .78-.45 1.67-.08 1.67.8a1.25 1.25 0 11-2.49-.17zm1.76.23c0-.48-.41-.67-1-.4v.09c0 .59.25.83.56.83s.44-.17.44-.52zM200.08 285.85c1.17-.07 1.49-.16 1.49-.37s-.33-.43-1.24-.55v-.34l1.11-.86h-1.3v-.68h2.05l.06.68-1.06.8c.83.18 1.15.51 1.15.9 0 .6-.67 1.05-2.21 1.13zM203.39 286.45a13.46 13.46 0 011.31-2.67h-1.6l.06-.7h2.33v.68a14.72 14.72 0 00-1.3 2.8zM200.08 292.5c1.17-.07 1.49-.17 1.49-.38s-.33-.42-1.24-.54v-.34l1.11-.87h-1.3v-.67h2.05l.06.67-1.06.81c.83.17 1.15.51 1.15.89 0 .61-.67 1.06-2.21 1.14zM203 292.33a.92.92 0 00.05-1.74c0-.48.42-1 1.22-1 .63 0 1.13.33 1.13.84a1 1 0 01-.61.86c.36.21.68.47.68.89s-.49 1-1.3 1-1.17-.32-1.17-.85zm1.71 0c0-.25-.32-.44-.68-.64a.67.67 0 00-.29.52c0 .25.15.44.5.44s.48-.17.48-.35zm-.32-1.21a.63.63 0 00.27-.48c0-.23-.12-.4-.44-.4s-.42.14-.42.29.28.39.6.56zM200.08 299.15c1.17-.07 1.49-.17 1.49-.38s-.33-.43-1.24-.54v-.35l1.11-.86h-1.3v-.67h2.05l.06.67-1.06.81c.83.17 1.15.51 1.15.89 0 .6-.67 1.06-2.21 1.14zM203.33 299.25c.84-.32 1.19-.61 1.33-1-.78.44-1.67.08-1.67-.8a1.25 1.25 0 112.49.17c0 1-.56 1.73-1.83 2.27zm1.41-1.45v-.09c0-.59-.25-.83-.56-.83s-.46.17-.46.51c0 .49.41.67 1.02.41zM202.16 305.84v.59h-.73v-.59H200a11.57 11.57 0 01.33-2.88l.84.05-.55 2.16h.82v-1.08l.73-.08v1.16h.36l-.06.67zM202.94 304.77c0-1.11.51-1.85 1.34-1.85s1.26.65 1.26 1.73-.51 1.85-1.35 1.85-1.25-.65-1.25-1.73zm.75-.07l1.05-.54c-.08-.38-.25-.61-.51-.61s-.54.38-.54 1.08zm1.1.09l-1 .53c.08.37.24.59.5.59s.5-.42.5-1.12zM202.16 312.49v.58h-.73v-.58H200a11.47 11.47 0 01.33-2.88l.84.05-.55 2.16h.82v-1.08l.73-.08v1.16h.36l-.06.67zM203.09 313.07v-.65h.91v-1.76h-.81v-.57l.81-.09v-.41l.76-.06v2.88h.82l-.06.65zM202.16 319.13v.59h-.73v-.59H200a11.44 11.44 0 01.33-2.87l.84.05-.55 2.15h.82v-1.07l.73-.08v1.15h.36l-.06.67zM203.13 319.72l-.07-.61c1-.71 1.5-1.16 1.5-1.61s-.32-.5-1.4-.53l.07-.73c1.63 0 2.11.47 2.11 1.05s-.5 1.14-1.32 1.76h1.39v.67zM202.16 325.78v.59h-.73v-.59H200a11.57 11.57 0 01.33-2.88l.84.05-.55 2.16h.82V324l.73-.07v1.15h.36l-.06.67zM203.15 325.74c1.17-.07 1.49-.17 1.49-.38s-.33-.42-1.24-.54v-.34l1.11-.87h-1.3v-.67h2l.06.67-1.06.81c.83.17 1.15.51 1.15.89 0 .61-.67 1.06-2.21 1.14zM202.16 332.43v.57h-.73v-.59H200a11.57 11.57 0 01.33-2.88l.84.05-.55 2.16h.82v-1.08l.73-.08v1.16h.36l-.06.67zM205.23 332.43v.57h-.73v-.59h-1.44a11.57 11.57 0 01.33-2.88l.84.05-.55 2.16h.82v-1.08l.73-.08v1.16h.37l-.07.67z"></path>
</g>
<g id="code">
<rect class="line" data-name="line" x="210.54" y="250.33" width="70.96" height="3.07" fill="#a3848d" opacity=".39" data-svg-origin="210.5399932861328 250.3300018310547" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 150.06; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="256.92" width="75.56" height="3.07" fill="#a58492" opacity=".39" data-svg-origin="210.5399932861328 256.9200134277344" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 159.26; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="263.57" width="61.58" height="3.07" fill="#a284a3" opacity=".39" data-svg-origin="210.5399932861328 263.57000732421875" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 131.3; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="270.28" width="52.68" height="3.07" fill="#9084a0" opacity=".39" data-svg-origin="210.5399932861328 270.2799987792969" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 113.5; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="276.86" width="43.68" height="3.07" fill="#83859e" opacity=".39" data-svg-origin="210.5399932861328 276.8599853515625" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 95.5; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="283.56" width="73.08" height="3.07" fill="#83929b" opacity=".39" data-svg-origin="210.5399932861328 283.55999755859375" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 154.3; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="290.42" width="85.72" height="3.07" fill="#829995" opacity=".39" data-svg-origin="210.5399932861328 290.4200134277344" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 179.58; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="296.86" width="71.54" height="3.07" fill="#84998b" opacity=".39" data-svg-origin="210.5399932861328 296.8599853515625" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 151.22; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="303.51" width="67.52" height="3.07" fill="#899985" opacity=".39" data-svg-origin="210.5399932861328 303.510009765625" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 143.18; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="310.1" width="32.1" height="3.07" fill="#979987" opacity=".39" data-svg-origin="210.5399932861328 310.1000061035156" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 72.34; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="316.75" width="93.48" height="3.07" fill="#999488" opacity=".39" data-svg-origin="210.5399932861328 316.75" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 195.1; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.54" y="323.4" width="67.52" height="3.07" fill="#998e8a" opacity=".39" data-svg-origin="210.5399932861328 323.3999938964844" transform="matrix(0,0,0,1,210.53999,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 143.18; stroke-dasharray: 0px, 999999px;"></rect>
<rect class="line" data-name="line" x="210.42" y="330.05" width="50.03" height="3.07" fill="#998c8c" opacity=".39" data-svg-origin="210.4199981689453 330.04998779296875" transform="matrix(0,0,0,1,210.42,0)" style="transform-origin: 0px 0px; stroke-dashoffset: 108.2; stroke-dasharray: 0px, 999999px;"></rect>
</g>
</g>
<g id="iterm" opacity="0" data-svg-origin="283.99497985839844 311.64500427246094" transform="matrix(0,0,0,0,263.99498,371.645)" style="transform-origin: 0px 0px;">
<rect x="259.67" y="294.33" width="48.74" height="38.57" fill="#333"></rect>
<path d="M260.33 290.39h47.22a.86.86 0 01.86.86v4.38h-48.83v-4.49a.75.75 0 01.75-.75z" fill="#d3d3d3"></path>
<circle cx="262.39" cy="293.28" fill="#e84d4d" r="1.04"></circle>
<circle cx="266.28" cy="293.28" fill="#f2dd77" r="1.04"></circle>
<circle cx="269.99" cy="293.28" fill="#4eb785" r="1.04"></circle>
<path d="M264.11 303.17a.44.44 0 01-.29-.11.37.37 0 010-.56l1.36-1.28-1.36-1.29a.36.36 0 010-.55.41.41 0 01.58 0l1.66 1.56a.36.36 0 01.12.28.36.36 0 01-.12.27l-1.66 1.57a.46.46 0 01-.29.11z" fill="#83e5ab"></path>
<path id="cursor" d="M269.33 302.78a.4.4 0 00-.41-.39h-2.42a.39.39 0 100 .78h2.42a.4.4 0 00.41-.39z" fill="#83e5ab"></path>
</g>
<g class="webpage" clip-path="url(#clippy)">
<g id="website">
<rect x="133.88" y="243.41" width="52.47" height="242.13" rx="3.57" fill="#f0f0f2"></rect>
<line x1="141.67" y1="256.81" x2="174.02" y2="256.81" fill="none" stroke="#dd859c" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2"></line>
<line x1="141.67" y1="262.1" x2="179.77" y2="262.1" fill="none" stroke="#dd859c" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2"></line>
<line x1="141.67" y1="267.4" x2="174.02" y2="267.4" fill="none" stroke="#dd859c" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2"></line>
<rect x="139.83" y="275.67" width="40.59" height="28.15" rx="3.22" fill="#f2c5c2"></rect>
<path d="M154.57 284.27a5.58 5.58 0 11-5.58-5.35 5.46 5.46 0 015.58 5.35z" fill="#fff" opacity=".48" style="mix-blend-mode:overlay"></path>
<line x1="144.8" y1="299.31" x2="161.56" y2="299.31" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".68"></line>
<line x1="144.8" y1="294.69" x2="169.32" y2="294.69" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".68"></line>
<g>
<rect x="139.83" y="308.41" width="37.69" height="49.32" rx="3.34" fill="#bdc0f4"></rect>
<line x1="146.12" y1="333.39" x2="157.69" y2="333.39" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="146.12" y1="328.77" x2="163.05" y2="328.77" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="146.12" y1="323.91" x2="168.46" y2="323.91" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="146.12" y1="318.62" x2="172.42" y2="318.62" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="146.12" y1="313.32" x2="168.46" y2="313.32" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
</g>
<g>
<rect x="139.83" y="363.82" width="40.59" height="58.46" rx="3.22" fill="#c2e7ef"></rect>
<line x1="144.98" y1="414.13" x2="158.87" y2="414.13" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="144.85" y1="410.5" x2="163.18" y2="410.5" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="144.62" y1="406.69" x2="166.2" y2="406.69" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="144.68" y1="402.92" x2="164.8" y2="402.92" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".68"></line>
<line x1="144.75" y1="399.16" x2="158.5" y2="399.16" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".68"></line>
<rect x="144.8" y="368.54" width="29.22" height="23.21" rx="6.86" fill="#fff" opacity=".48" style="mix-blend-mode:overlay"></rect>
</g>
<g>
<rect x="140.38" y="433.67" width="39.82" height="40.46" rx="3.34" fill="#d0b6d1"></rect>
<line x1="147.03" y1="467.66" x2="170.62" y2="467.66" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="147.03" y1="463.31" x2="174.81" y2="463.31" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="147.03" y1="458.97" x2="170.62" y2="458.97" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="147.03" y1="454.16" x2="159.25" y2="454.16" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="147.03" y1="450.37" x2="164.91" y2="450.37" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="147.03" y1="446.39" x2="170.62" y2="446.39" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="147.03" y1="442.04" x2="174.81" y2="442.04" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
<line x1="147.03" y1="437.7" x2="170.62" y2="437.7" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.2" opacity=".81"></line>
</g>
</g>
</g>
</g>
<rect x="133.98" y="243.95" width="52.38" height="4.25" fill="#ddd"></rect>
<ellipse cx="136.91" cy="246.08" rx=".93" ry=".92" fill="#afafaf"></ellipse>
<ellipse cx="140.38" cy="246.08" rx=".93" ry=".92" fill="#eaeaea"></ellipse>
<ellipse cx="143.69" cy="246.08" rx=".93" ry=".92" fill="#afafaf"></ellipse>
<rect x="133.88" y="330.05" width="52.47" height="2.85" fill="#eaeaea"></rect>
<rect x="182.52" y="248.2" width="3.84" height="81.84" fill="#fff"></rect>
<rect id="scrollbar" x="183.24" y="249.77" width="2.4" height="22.21" rx="1.02" fill="#ddd"></rect>
</g>
</g>
</g>
</svg>
I'm trying to draw a rectangle as four lines. The problem is that the top and left lines appear to be thinner and there is a missing pixel at the right bottom corner (See Screenshot).
HTML svg element :
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" width="500" height="500" style="
padding: 20px;
box-sizing: border-box;
">
<line x1="0" y1="0" x2="20" y2="0" class="line"></line>
<line x1="20" y1="0" x2="20" y2="20" class="line"></line>
<line x1="20" y1="20" x2="0" y2="20" class="line"></line>
<line x1="0" y1="20" x2="0" y2="0" class="line"></line></svg>
</svg>
rendered result in the browser :
[
Only the stroke of a line is visible and it extends equally each side of it. So if you draw a single line from 0, 0 to 100, 0 and the line has width 2 then that line will actually occupy a rectangle with corners (-1, -1), (101, -1), (101, 1), (-1, 1).
So your rectangle's lines are partially outside the drawing canvas and those parts that are outside are not visible.
Also if you want to draw a square you'll need to draw some of the lines longer so that you get a square effect at the corners. Alternatively use a <path> and it will handle the corners without you having to worry about it.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" width="500" height="500" viewBox="0 0 40 40" style="
padding: 20px;
box-sizing: border-box;
">
<path d="M0,0 20,0 20,20 0,20Z" fill="none" stroke="black" transform="translate(1,1)" />
</svg>
or you could just move the canvas e.g.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" width="500" height="500" viewBox="-2 -2 40 40" style="
padding: 20px;
box-sizing: border-box;
">
<path d="M0,0 20,0 20,20 0,20Z" fill="none" stroke="black" />
</svg>
Or, in the shortest possible form:
<svg width="250" height="250" viewBox="-1 -1 22 22">
<path d="M0,0H20V20H0z" fill="none" stroke="black"/>
</svg>
I've re-written your SVG with a few small changes and it seems to be working fine.
There are four main changes:
<line /> is a self-closing element.
I have explicitly given each line a stroke-width of 1
Wherever you have used a co-ordinate of 0, I have used 1
I have given each line a stroke-linecap of square
I have also reduced the viewBox to 100 x 100 so you can see the square much larger.
Working Example:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 100 100">
<defs>
<style type="text/css"><![CDATA[
svg {
background-color: rgb(255, 0, 0);
padding: 20px;
box-sizing: border-box;
}
.line {
stroke: rgb(255, 255, 255);
stroke-width: 1;
stroke-linecap: square;
}
]]></style>
</defs>
<line x1="1" y1="1" x2="21" y2="1" class="line" />
<line x1="21" y1="1" x2="21" y2="21" class="line" />
<line x1="21" y1="21" x2="1" y2="21" class="line" />
<line x1="1" y1="21" x2="1" y2="1" class="line" />
</svg>
I'm trying to make a single stroke in my svg drawing to be highlighted on hover.
Is it possible to be done with css or do I need to use javascript?
Here's my html:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1024px"
height="768px" viewBox="0 0 1024 768" enable-background="new 0 0 1024 768" xml:space="preserve">
<g id="Warstwa_1">
<g>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M825.61,601.428c0-55.844-117.614,25.921-257.144,29.87
c-137.662,3.896-176.422-82.646-210.389-81.817c-53.246,1.299,6.986,64.935,6.986,64.935"> <animate dur="0.1s" to="#000000" from="#00755F" attributeName="stroke" begin="mouseover"/>
<animate dur="0.1s" to="#4e86b1" from="#00755F" attributeName="stroke" begin="mouseout"/></path>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M826.179,592.094c0-55.844-121.106,41.499-260.634,44.886
c-135.795,3.409-172.364-99.479-208.035-95.535c-50.922,5.629,9.69,69.933,9.69,69.933"> <animate dur="0.1s" to="#000000" from="#00755F" attributeName="stroke" begin="mouseover"/>
<animate dur="0.1s" to="#4e86b1" from="#000000" attributeName="stroke" begin="mouseout"/></path>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M826.747,582.759c0-55.844-124.6,57.077-264.124,59.902
c-133.929,2.922-167.956-116.474-205.682-109.252c-48.385,9.262,12.395,74.93,12.395,74.93"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M827.314,573.425c0-55.844-128.091,72.655-267.613,74.919
c-132.062,2.434-163.305-133.679-203.328-122.971c-45.755,12.242,15.098,79.928,15.098,79.928"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M827.883,564.09c0-55.844-131.584,88.234-271.104,89.936
c-130.195,1.947-158.511-151.123-200.974-136.688c-43.118,14.657,17.802,84.925,17.802,84.925"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M828.451,554.756c0-55.844-135.076,103.812-274.595,104.951
c-128.328,1.461-153.666-168.831-198.62-150.405c-40.533,16.613,20.506,89.923,20.506,89.923"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M829.02,545.422c0-55.844-138.568,119.39-278.085,119.967
c-126.461,0.974-153.608-194.835-196.266-164.123c-40.653,11.203,23.209,94.921,23.209,94.921"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M829.588,536.087c0-55.844-142.062,134.968-281.575,134.983
c-124.594,0.486-149.806-213.533-193.912-177.84c-38.554,12.853,25.913,99.918,25.913,99.918"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M830.156,526.753c0-55.844-145.554,150.546-285.065,149.999
c-122.728,0-146.004-232.231-191.559-191.558c-36.455,14.504,28.617,104.915,28.617,104.915"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M830.724,517.419c0-55.844-149.045,166.124-288.555,165.016
c-120.861-0.487-135.317-242.556-189.205-205.276c-31.222,21.599,31.321,109.913,31.321,109.913"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M831.292,508.084c0-55.844-152.538,181.702-292.045,180.032
c-118.994-0.975-131.311-261.733-186.852-218.993c-29.2,22.47,34.025,114.91,34.025,114.91"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M831.86,498.75c0-55.844-156.03,197.28-295.535,195.048
c-117.127-1.462-127.649-281.201-184.498-232.711c-27.306,23.291,36.729,119.908,36.729,119.908"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M832.429,489.416c0-55.844-159.522,212.857-299.026,210.063
c-115.26-1.948-124.374-300.938-182.143-246.429c-25.538,24.097,39.433,124.906,39.433,124.906"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M832.997,480.081c0-55.844-163.016,228.437-302.517,225.08
c-113.393-2.435-121.518-320.91-179.79-260.146c-23.895,24.917,42.137,129.903,42.137,129.903"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M833.564,470.747c0-55.844-166.507,244.015-306.006,240.097
c-111.526-2.923-119.102-341.081-177.436-273.864c-22.373,25.78,44.84,134.901,44.84,134.901"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M834.133,461.412c0-55.844-170,259.593-309.496,255.113
c-109.66-3.41-117.128-361.4-175.082-287.581c-20.965,26.704,47.544,139.898,47.544,139.898"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M834.701,452.078c0-55.844-173.492,275.171-312.986,270.129
c-107.793-3.896-115.586-381.818-172.729-301.299c-19.664,27.709,50.248,144.896,50.248,144.896"/>
</g>/g></svg>
As you can see I tried 'animate' but it doesn't work.
I also tried css like here:
g#Warstwa_1 path
{ stroke: red; }
g#Warstwa_1:hover path { stroke: blue; }
This makes the whole image to change color instead of a single line.
Here's live example:
http://www.ewelinawoloszyn.com/index11.html
Any suggestions are more than welcome. Many thanks in advance for your help.
You need to set the :hover state on the actual path element.
Also note that your SVG has a malformed closing <g> at the end.
svg {
margin-top: -200px;
/* demo positioning */
}
#Warstwa_1 path {
stroke-width: 2px;
/* for demo pusposes only */
transition: stroke .4s;
}
#Warstwa_1 path:hover {
stroke: red;
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1024 768" enable-background="new 0 0 1024 768" xml:space="preserve">
<g id="Warstwa_1">
<g>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M825.61,601.428c0-55.844-117.614,25.921-257.144,29.87
c-137.662,3.896-176.422-82.646-210.389-81.817c-53.246,1.299,6.986,64.935,6.986,64.935"> <animate dur="0.1s" to="#000000" from="#00755F" attributeName="stroke" begin="mouseover"/>
<animate dur="0.1s" to="#4e86b1" from="#00755F" attributeName="stroke" begin="mouseout"/></path>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M826.179,592.094c0-55.844-121.106,41.499-260.634,44.886
c-135.795,3.409-172.364-99.479-208.035-95.535c-50.922,5.629,9.69,69.933,9.69,69.933"> <animate dur="0.1s" to="#000000" from="#00755F" attributeName="stroke" begin="mouseover"/>
<animate dur="0.1s" to="#4e86b1" from="#000000" attributeName="stroke" begin="mouseout"/></path>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M826.747,582.759c0-55.844-124.6,57.077-264.124,59.902
c-133.929,2.922-167.956-116.474-205.682-109.252c-48.385,9.262,12.395,74.93,12.395,74.93"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M827.314,573.425c0-55.844-128.091,72.655-267.613,74.919
c-132.062,2.434-163.305-133.679-203.328-122.971c-45.755,12.242,15.098,79.928,15.098,79.928"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M827.883,564.09c0-55.844-131.584,88.234-271.104,89.936
c-130.195,1.947-158.511-151.123-200.974-136.688c-43.118,14.657,17.802,84.925,17.802,84.925"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M828.451,554.756c0-55.844-135.076,103.812-274.595,104.951
c-128.328,1.461-153.666-168.831-198.62-150.405c-40.533,16.613,20.506,89.923,20.506,89.923"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M829.02,545.422c0-55.844-138.568,119.39-278.085,119.967
c-126.461,0.974-153.608-194.835-196.266-164.123c-40.653,11.203,23.209,94.921,23.209,94.921"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M829.588,536.087c0-55.844-142.062,134.968-281.575,134.983
c-124.594,0.486-149.806-213.533-193.912-177.84c-38.554,12.853,25.913,99.918,25.913,99.918"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M830.156,526.753c0-55.844-145.554,150.546-285.065,149.999
c-122.728,0-146.004-232.231-191.559-191.558c-36.455,14.504,28.617,104.915,28.617,104.915"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M830.724,517.419c0-55.844-149.045,166.124-288.555,165.016
c-120.861-0.487-135.317-242.556-189.205-205.276c-31.222,21.599,31.321,109.913,31.321,109.913"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M831.292,508.084c0-55.844-152.538,181.702-292.045,180.032
c-118.994-0.975-131.311-261.733-186.852-218.993c-29.2,22.47,34.025,114.91,34.025,114.91"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M831.86,498.75c0-55.844-156.03,197.28-295.535,195.048
c-117.127-1.462-127.649-281.201-184.498-232.711c-27.306,23.291,36.729,119.908,36.729,119.908"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M832.429,489.416c0-55.844-159.522,212.857-299.026,210.063
c-115.26-1.948-124.374-300.938-182.143-246.429c-25.538,24.097,39.433,124.906,39.433,124.906"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M832.997,480.081c0-55.844-163.016,228.437-302.517,225.08
c-113.393-2.435-121.518-320.91-179.79-260.146c-23.895,24.917,42.137,129.903,42.137,129.903"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M833.564,470.747c0-55.844-166.507,244.015-306.006,240.097
c-111.526-2.923-119.102-341.081-177.436-273.864c-22.373,25.78,44.84,134.901,44.84,134.901"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M834.133,461.412c0-55.844-170,259.593-309.496,255.113
c-109.66-3.41-117.128-361.4-175.082-287.581c-20.965,26.704,47.544,139.898,47.544,139.898"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M834.701,452.078c0-55.844-173.492,275.171-312.986,270.129
c-107.793-3.896-115.586-381.818-172.729-301.299c-19.664,27.709,50.248,144.896,50.248,144.896"/>
</g></g></svg>
I had to add closing tag for .hi class and added
g#Warstwa_1_kopia {
display:block;
}
Then Paulie_D CSS worked.
for animation, you can use this code(CSS-animation) and modify according to your requirement
svg:hover path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear forwards;
}
#keyframes dash {
to {
stroke-dashoffset: 0;
stroke: blue;
}
}
here I apply hover effect on svg(tag).
and for more details about CSS-animation check the link.
I am working on a coloring application with a .PNG background (a photo of a building) and .SVG elements over the background. These .SVG paths are then being colored with the help of a JavaScript code. I started with setting the opacity of the .SVG layers to i.e. 0.65
In this case the .PNG background is visible behind the colored .SVG but the colors seem 'washed out' because the lowered opacity. Is there a way to maintain the intensity of the colors, i.e. to overlay the colored .SVG path on the .PNG background?
Here is the HTML part :
<div class="building_area_eave_1" id="building_area">
<svg version="1.0" id="full_x5F_wall_x5F_w_x5F_eave" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 664" enable-background="new 0 0 1000 664" xml:space="preserve" style="margin-top:9px; opacity:0.65;">
<polygon id="main_wall_1" fill="#f7f7f7" points="200.833,135.184 32.167,302.846 32.75,478 67.25,480 66.992,321.747 158,314.5 159,488 257.25,496.5 256.5,303.25 392.022,291.75 392.25,508 461,513 461,256 "/>
</div>
with the CSS :
#building_area {
background-repeat: no-repeat;
background-attachment: scroll;
background-clip: border-box;
background-origin: padding-box;
background-size:contain;
background-position:center;
position: relative;
}
.building_area_eave_1 {
background: url("../images/1_part_eave_background.png") no-repeat;
}
hi do you expecting like this..???
#building_area {
background-repeat: no-repeat;
background-attachment: scroll;
background-clip: border-box;
background-origin: padding-box;
background-size:contain;
background-position:center;
position: relative;
}
.building_area_eave_1 {
background: url("http://blog.jimdo.com/wp-content/uploads/2014/01/tree-247122.jpg") no-repeat;
}
svg#full_x5F_wall_x5F_w_x5F_eave ~ #main_wall_1 {
opacity: 0.65;
}
<div class="building_area_eave_1" id="building_area">
<svg version="1.0" id="full_x5F_wall_x5F_w_x5F_eave" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 664" enable-background="new 0 0 1000 664" xml:space="preserve" style="margin-top:9px;">
<polygon id="main_wall_1" fill="#f7f7f7" points="200.833,135.184 32.167,302.846 32.75,478 67.25,480 66.992,321.747 158,314.5 159,488 257.25,496.5 256.5,303.25 392.022,291.75 392.25,508 461,513 461,256 "/>
</div>
and here is the demo code..!!
Demo code
You can use blend modes in your svg:
<filter id="f1" x="0" y="0" width="1" height="1">
<feImage xlink:href="#p1" result="p1"/>
<feImage xlink:href="#p2" result="p2"/>
<feBlend mode="multiply" in="p1" in2="p2" />
</filter>
Here is a sample:
<svg width="500px" height="500px" viewBox="0 0 1000 1000">
<defs>
<path id="orange" d="M200,50 a35 35 0 0 1 100 0 l0 70 a40 40 0 0 1 -100 0 z" fill="rgb(252,170,30)"></path>
<path id="yellow" transform="rotate(45 250 185)" d="M200,50 a35 35 0 0 1 100 0 l0 70 a35 35 0 0 1 -100 0 z" fill="rgb(242,229,0)">
<animateTransform attributeName="transform" attributeType="XML"
type="rotate" from="0 250 180" to="45 250 180" dur="1.5s"
additive="replace" fill="freeze"/>
</path>
<path id="green" transform="rotate(90 250 180)" d="M200,50 a35 35 0 0 1 100 0 l0 70 a35 35 0 0 1 -100 0 z" fill="rgb(181,213,74)" >
<animateTransform attributeName="transform" attributeType="XML"
type="rotate" from="0 250 180" to="90 250 180" dur="1.5s"
additive="replace" fill="freeze"/>
</path>
<path id="greenblue" transform="rotate(135 250 180)" d="M200,50 a35 35 0 0 1 100 0 l0 70 a35 35 0 0 1 -100 0 z" fill="rgb(104,193,159)" >
<animateTransform attributeName="transform" attributeType="XML"
type="rotate" from="0 250 180" to="135 250 180" dur="1.5s"
additive="replace" fill="freeze"/>
</path>
<path id="blue" transform="rotate(180 250 180)" d="M200,50 a35 35 0 0 1 100 0 l0 70 a35 35 0 0 1 -100 0 z" fill="rgb(112,178,226)" >
<animateTransform attributeName="transform" attributeType="XML"
type="rotate" from="0 250 180" to="180 250 180" dur="1.5s"
additive="replace" fill="freeze"/>
</path>
<path id="violet" transform="rotate(225 250 180)" d="M200,50 a35 35 0 0 1 100 0 l0 70 a35 35 0 0 1 -100 0 z" fill="rgb(166,141,197)" >
<animateTransform attributeName="transform" attributeType="XML"
type="rotate" from="0 250 180" to="225 250 180" dur="1.5s"
additive="replace" fill="freeze"/>
</path>
<path id="pink" transform="rotate(270 250 180)" d="M200,50 a35 35 0 0 1 100 0 l0 70 a35 35 0 0 1 -100 0 z" fill="rgb(213,135,172)" >
<animateTransform attributeName="transform" attributeType="XML"
type="rotate" from="0 250 180" to="270 250 180" dur="1.5s"
additive="replace" fill="freeze"/>
</path>
<path id="red" transform="rotate(315 250 180)" d="M200,50 a35 35 0 0 1 100 0 l0 70 a35 35 0 0 1 -100 0 z" fill="rgb(246,116,93)" >
<animateTransform attributeName="transform" attributeType="XML"
type="rotate" from="0 250 180" to="315 250 180" dur="1.5s"
additive="replace" fill="freeze"/>
</path>
<filter id="blendit">
<feImage xlink:href="#orange" x="0" y="0" result="1"/>
<feImage xlink:href="#yellow" x="0" y="0" result="2"/>
<feImage xlink:href="#green" x="0" y="0" result="3"/>
<feImage xlink:href="#greenblue" x="0" y="0" result="4"/>
<feImage xlink:href="#blue" x="0" y="0" result="5"/>
<feImage xlink:href="#violet" x="0" y="0" result="6"/>
<feImage xlink:href="#pink" x="0" y="0" result="7"/>
<feImage xlink:href="#red" x="0" y="0" result="8"/>
<feBlend mode="multiply" in="1" in2="2" result="12"/>
<feBlend mode="multiply" in="12" in2="3" result="123"/>
<feBlend mode="multiply" in="123" in2="4" result="1234"/>
<feBlend mode="multiply" in="1234" in2="5" result="12345"/>
<feBlend mode="multiply" in="12345" in2="6" result="123456"/>
<feBlend mode="multiply" in="123456" in2="7"result="1234567"/>
<feBlend mode="multiply" in="1234567" in2="8" result="FINAL"/>
<feColorMatrix type="hueRotate" values="0">
<animate attributeName="values" attributeType="XML" values="0; 0; 0 ; 0 ; 0 ; 0 ;180;360;360" dur="12s" repeatCount="indefinite"/>
</feColorMatrix>
</filter>
</defs>
<rect x="0" y="0" width="500" height="500" filter="url(#blendit)"/>
</svg>
Full details here: https://css-tricks.com/basics-css-blend-modes/
OK, thanks to the link provided by #ramtin-gh I managed to solve this issue.
Adding a mix-blend-mode property to the SVG layers resulted the colors to display multiply to the background image.
HTML :
<div class="building_area_eave_1" id="building_area">
<svg class="svg_overlay" version="1.0" id="full_x5F_wall_x5F_w_x5F_eave" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 664" enable-background="new 0 0 1000 664" xml:space="preserve">
<polygon id="main_wall_1" fill="#f7f7f7" points="200.833,135.184 32.167,302.846 32.75,478 67.25,480 66.992,321.747 158,314.5 159,488 257.25,496.5 256.5,303.25 392.022,291.75 392.25,508 461,513 461,256 "/>
</div>
with the CSS style :
#building_area {
background-repeat: no-repeat;
background-attachment: scroll;
background-clip: border-box;
background-origin: padding-box;
background-size:contain;
background-position:center;
position: relative;
}
.building_area_eave_1 {
background: url("../images/1_part_eave_background.png") no-repeat;
}
.svg_overlay {
margin-top:9px;
mix-blend-mode: multiply;
}
I'm not posting all the SVG layers here to keep the post simple. Thanks for your replies. Hope this can help someone with similar issue.
Core issue:
I'm trying to grab an SVG-Inline-Object with JavaScript and send it to the Server where the output represents the given SVG-Object.
All works fine in Chrome & FF but IE (>= 9) cuts the given string of the SVG-Object anywhere, so the string sent to the server is not complete that ends up in an error.
My current process:
html
<html>
<head></head>
<body>
<div>
<svg>(expect a correctly generated svg-object here - works fine)</svg>
<a href='#export'>export</a>
<!-- click on this link triggers the javascript-function !-->
</div>
</body>
</html>
javascript (triggered by click on the "export"-Link)
var $svg = $(this).parent().find("svg"); // works fine
var s = new XMLSerializer();
var svgContent = s.serializeToString($svg[0]);
$.post("/Results/saveSVG/", // saveSVG => store SVG-Data in Session
{ "svg" : svgContent }).done(function(data) {
window.open("/Results/getSVG/svg.php");
});
/Results/saveSVG/ (a PHP-File)
$_SESSION["svg"] = $_POST["svg"]; // similar to something like this (works fine)
svg.php (works like a charm in Chrome / FF
header("Content-type: image/svg+xml");
echo $_SESSION["svg"];
exit;
What happens in Chrome / FF?
svgContent-variable:
<svg>...</svg>
svgContent-variable received by the server (/Results/saveSVG/)
output on /Results/getSVG/svg.php is a perfect SVG-File
What happens in IE?
svgContent-variable is cropped somewhere:
<svg>..
invalid svgContent-variable received by the server (/Results/saveSVG/)
output on /Results/getSVG/svg.php does not render
Debug-Information in IE
svgContent-variable: (Javascript)
<svg xmlns="http://www.w3.org/2000/svg" width="263" height="300" xmlns="http://www.w3.org/2000/svg" xmlns:NS1="" NS1:xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><defs><clipPath id="DevExpress_28"><rect fill="none" stroke="none" stroke-width="0" x="0" y="0" width="263" height="300" rx="0" ry="0" /></clipPath><pattern id="DevExpressPattern_46" patternUnits="userSpaceOnUse" width="6" height="6"><path opacity="0.8" fill="none" stroke="#1498e7" stroke-width="1" d="M 0 0 L 1 1" /><path opacity="0.8" fill="none" stroke="#1498e7" stroke-width="1" d="M 5 5 L 6 6" /><path fill="none" stroke="#1498e7" stroke-width="2" d="M 0 6 L 6 0" /></pattern><pattern id="DevExpressPattern_47" patternUnits="userSpaceOnUse" width="6" height="6"><path opacity="0.8" fill="none" stroke="#7bc940" stroke-width="1" d="M 0 0 L 1 1" /><path opacity="0.8" fill="none" stroke="#7bc940" stroke-width="1" d="M 5 5 L 6 6" /><path fill="none" stroke="#7bc940" stroke-width="2" d="M 0 6 L 6 0" /></pattern><pattern id="DevExpressPattern_48" patternUnits="userSpaceOnUse" width="6" height="6"><path opacity="0.8" fill="none" stroke="#c7399a" stroke-width="1" d="M 0 0 L 1 1" /><path opacity="0.8" fill="none" stroke="#c7399a" stroke-width="1" d="M 5 5 L 6 6" /><path fill="none" stroke="#c7399a" stroke-width="2" d="M 0 6 L 6 0" /></pattern></defs><g class="series"><g class="series"><path fill="#0084d3" stroke="#ffffff" stroke-dasharray="none" stroke-linejoin="round" stroke-width="2" d="M 85.9999 229.674 A 92 92 0 0 0 224 150 L 132 150 A 0 0 0 0 1 132 150 Z" r="0" line-width="2" /><path fill="#67b52c" stroke="#ffffff" stroke-dasharray="none" stroke-linejoin="round" stroke-width="2" d="M 86 70.3256 A 92 92 0 0 0 85.9999 229.674 L 132 150 A 0 0 0 0 1 132 150 Z" r="0" line-width="2" /><path fill="#b32586" stroke="#ffffff" stroke-dasharray="none" stroke-linejoin="round" stroke-width="2" d="M 224 150 A 92 92 0 0 0 86 70.3256 L 132 150 A 0 0 0 0 1 132 150 Z" r="0" line-width="2" /></g></g><g class="labels"><g class="labels"><g><path fill="none" stroke="#0084d3" stroke-width="1" d="M 179 231 L 188 247" /><g transform="rotate(0)" x="187.9998589266569" y="246.99492667245295"><rect fill="#0084d3" stroke="none" stroke-dasharray="none" stroke-width="0" x="185" y="243" width="43" height="25" rx="0" ry="0" /><text style="font-family: 'SegoeUI', 'Segoe UI', 'HelveticaNeue', 'Helvetica Neue', 'Trebuchet MS', Verdana; font-size: 12px; font-weight: 400; fill: #ffffff;" text-anchor="start" x="192.9999" y="260"><tspan x="192.9999" dy="0">33 %</tspan></text></g></g><g><path fill="none" stroke="#67b52c" stroke-width="1" d="M 39 150.5 L 20 150.5" /><g transform="translate(6) rotate(0)" x="20.000000000042646" y="149.99990226156188"><rect fill="#67b52c" stroke="none" stroke-dasharray="none" stroke-width="0" x="-6" y="137" width="25" height="25" rx="0" ry="0" /><text style="font-family: 'SegoeUI', 'Segoe UI', 'HelveticaNeue', 'Helvetica Neue', 'Trebuchet MS', Verdana; font-size: 12px; font-weight: 400; fill: #ffffff;" text-anchor="end" x="10" y="154"><tspan x="10" dy="0">...</tspan></text></g></g><g><path fill="none" stroke="#b32586" stroke-width="1" d="M 179 69 L 188 53" /><g transform="rotate(0)" x="188.00002821465443" y="53.00517106588667"><rect fill="#b32586" stroke="none" stroke-dasharray="none" stroke-width="0" x="185" y="32" width="43" height="25" rx="0" ry="0" /><text style="font-family: 'SegoeUI', 'Segoe UI', 'HelveticaNeue', 'Helvetica Neue', 'Trebuchet MS', Verdana; font-size: 12px; font-weight: 400; fill: #ffffff;" text-anchor="start" x="193" y="49"><tspan x="193" dy="0">33 %</tspan></text></g></g></g></g><g class="dxTooltip"><path visibility="hidden" opacity="0.1" fill="#000000" stroke="none" d="M 0 0" /><path visibility="hidden" fill="black" stroke="none" d="M 0 0 Z" /><text visibility="hidden" style="font-family: 'SegoeUI-Light', 'Segoe UI Light', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'SegoeUI', 'Segoe UI', 'HelveticaNeue', 'Helvetica Neue', 'Trebuchet MS', Verdana; font-size: 26px; font-weight: 200; cursor: default; fill: #ffffff; fill-opacity: 0.75;" text-anchor="middle" x="0" y="0"><tspan x="0" dy="0">0</tspan></text></g><g class="tracker"><g class="seriesTracker" /><g class="markerTracker"><path opacity="0.0001" fill="grey" stroke="none" stroke-linejoin="round" d="M 85.9999 229.674 A 92 92 0 0 0 224 150 L 132 150 A 0 0 0 0 1 132 150 Z" /><path opacity="0.0001" fill="grey" stroke="none" stroke-linejoin="round" d="M 86 70.3256 A 92 92 0 0 0 85.9999 229.674 L 132 150 A 0 0 0 0 1 132 150 Z" /><path opacity="0.0001" fill="grey" stroke="none" stroke-linejoin="round" d="M 224 150 A 92 92 0 0 0 86 70.3256 L 132 150 A 0 0 0 0 1 132 150 Z" /></g></g></svg>
Same variable fully stored in the Session
Output with SVG is cut:
<svg xmlns="http://www.w3.org/2000/svg" width="263" height="300" xmlns="http://www.w3.org/2000/svg" xmlns:NS1="" NS1:xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><defs><clipPath id="DevExpress_28"><rect fill="none" stroke="none" stroke-width="0" x="0" y="0" width="263" height="300" rx="0" ry="0" /></clipPath><pattern id="DevExpressPattern_46" patternUnits="userSpaceOnUse" width="6" height="6"><path opacity="0.8" fill="none" stroke="#1498e7" stroke-width="1" d="M 0 0 L 1 1" /><path opacity="0.8" fill="none" stroke="#1498e7" stroke-width="1" d="M 5 5 L 6 6" /><path fill="none" stroke="#1498e7" stroke-width="2" d="M 0 6 L 6 0" /></pattern><pattern id="DevExpressPattern_47" patternUnits="userSpaceOnUse" width="6" height="6"><path opacity="0.8" fill="none" stroke="#7bc940" stroke-width="1" d="M 0 0 L 1 1" /><path opacity="0.8" fill="none" stroke="#7bc940" stroke-width="1" d="M 5 5 L 6 6" /><path fill="none" stroke="#7bc940" stroke-width="2" d="M 0 6 L 6 0" /></pattern><pattern id="DevExpressPattern_48" patternUnits="userSpaceOnUse" width="6" height="6"><path opacity="0.8" fill="none" stroke="#c7399a" stroke-width="1" d="M 0 0 L 1 1" /><path opacity="0.8" fill="none" stroke="#c7399a" stroke-width="1" d="M 5 5 L 6 6" /><path fill="none" stroke="#c7399a" stroke-width="2" d="M 0 6 L 6 0" /></pattern></defs><g class="series"><g class="series"><path fill="#0084d3" stroke="#ffffff" stroke-dasharray="none" stroke-linejoin="round" stroke-width="2" d="M 85.9999 229.674 A 92 92 0 0 0 224 150 L 132 150 A 0 0 0 0 1 132 150 Z" r="0" line-width="2" /><path fill="#67b52c" stroke="#ffffff" stroke-dasharray="none" stroke-linejoin="round" stroke-width="2" d="M 86 70.3256 A 92 92 0 0 0 85.9999 229.674 L 132 150 A 0 0 0 0 1 132 150 Z" r="0" line-width="2" /><path fill="#b32586" stroke="#ffffff" stroke-dasharray="none" stroke-linejoin="round" stroke-width="2" d="M 224 150 A 92 92 0 0 0 86 70.3256 L 132 150 A 0 0 0 0 1 132 150 Z" r="0" line-width="2" /></g></g><g class="labels"><g class="labels"><g><path fill="none" stroke="#0084d3" stroke-width="1" d="M 179 231 L 188 247" /><g transform="rotate(0)" x="187.9998589266569" y="246.99492667245295"><rect fill="#0084d3" stroke="none" stroke-dasharray="none" stroke-width="0" x="185" y="243" width="43" height="25" rx="0" ry="0" /><text style="font-family: 'SegoeUI', 'Segoe UI', 'HelveticaNeue', 'Helvetica Neue', 'Trebuchet MS', Verdana; font-size: 12px; font-weight: 400; fill: #ffffff;" text-anchor="start" x="192.9999" y="260"><tspan x="192.9999" dy="0">33 %</tspan></text></g></g><g><path fill="none" stroke="#67b52c" stroke-width="1" d="M 39 150.5 L 20 150.5" /><g transform="translate(6) rotate(0)" x="20.000000000042646" y="149.99990226156188"><rect fill="#67b52c" stroke="none" stroke-dasharray="none" stroke-width="0" x="-6" y="137" width="25" height="25" rx="0" ry="0" /><text style="font-family: 'SegoeUI', 'Segoe UI', 'HelveticaNeue', 'Helvetica Neue', 'Trebuchet MS', Verdana; font-size: 12px; font-weight: 400; fill: #ffffff;" text-anchor="end" x="10" y="154"><tspan x="10" dy="0">...</tspan></text></g></g><g><path fill="none" stroke="#b32586" stroke-width="1" d="M 179 69 L 188 53" /><g transform="rotate(0)" x="188.00002821465443" y="53.00517106588667"><rect fill="#b32586" stroke="none" stroke-dasharray="none" stroke-width="0" x="185" y="32" width="43" height="25" rx="0" ry="0" /><text style="font-family: 'SegoeUI', 'Segoe UI', 'HelveticaNeue', 'Helvetica Neue', 'Trebuchet MS', Verdana; font-size: 12px; font-weight: 400; fill: #ffffff;" text-anchor="start" x="193" y="49"><tspan x="193" dy="0">33 %</tspan></text></g></g></g></g><g class="dxTooltip"><path visibility="hidden" opacity="0.1" fill="#000000" stroke="none" d="M 0 0" /><path visibility="hidden" fill="black" stroke="none" d="M 0 0 Z" /><text visibility="hidden" style="font-family: 'SegoeUI-Light', 'Segoe UI Light', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'SegoeUI', 'Segoe UI', 'HelveticaNeue', 'Helvetica Neue', 'Trebuchet MS', Verdana;
Conclusion
the above concept works fine in chrome and ff but fails on all tested IE-Versions (9 / 10 / 11)
I've also tried to add the values into a hidden textarea and send the form to svg.php (Same effect / Chrome and FF - okay / IE fails).
Is there anything I have to adjust in the $.post-Request or is there any other concept to export an inline-SVG-Object?
the solution (thanks to timclutton - answer)
The problem caused due to a double-defined xmlns-attributes in the opening tag. Because I have no ifluence in the method where the svg-object was created, a simple str_replace did the job:
svg.php
<?
session_start();
header("Content-type: image/svg+xml");
echo str_replace("xmlns=\"http://www.w3.org/2000/svg\" xmlns:NS1=\"\" NS1:xmlns:xlink=\"http://www.w3.org/1999/xlink\"","",$_SESSION["svg"]);
?>
I've built the following from the code you posted (with minor alterations) and this works for me in IE11 and FF30 on Win8.1 x64. Perhaps try putting these two files in a folder (with jQuery, or change the src to a CDN) and see if it works for you.
File svg.php:
<?php
session_start();
if ($_POST) {
$_SESSION['svg'] = $_POST['svg'];
exit;
}
?>
<html>
<head>
<title>blah</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
function svg(e) {
var $svg = $(e).parent().find("svg"); // works fine
var s = new XMLSerializer();
var svgContent = s.serializeToString($svg[0]);
$.post("svg.php", // saveSVG => store SVG-Data in Session
{ "svg" : svgContent }).done(function(data) {
window.open("svg2.php");
});
}
</script>
</head>
<body>
<div>
<svg>
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
export
<!-- click on this link triggers the javascript-function !-->
</div>
</body>
</html>
File svg2.php:
<?php
session_start();
header("Content-type: image/svg+xml");
echo $_SESSION["svg"];
exit;
?>
Update for actual SVG content
The problem seems to be with the opening tag. Changing it from...
<svg xmlns="http://www.w3.org/2000/svg" width="263" height="300" xmlns="http://www.w3.org/2000/svg" xmlns:NS1="" NS1:xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
...to...
<svg xmlns="http://www.w3.org/2000/svg" width="263" height="300" version="1.1">
...makes it work with the code I posted above.
Update 2
Running your SVG code through the W3C Validator shows the errors. Using the modified opening tag I posted above validates successfully.
In conclusion, the problem is down to invalid XML.
Maybe it's not relevant, but have you tried this?
header("Content-type: image/svg+xml");
echo '<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">' .$_SESSION["svg"];
(extracted from https://stackoverflow.com/a/1623265/3625883)