I'm making a svg button with animated gradient in mouseover event, without CSS.
The button listen to mouseout and mouseover events, without any problem, changing the radialGradient attribute between id="rellenoZoomHover" and id="rellenoZoom", depending on the listener answer.
The button has an tag in it radialGradient declaration tag, that repeats only one time.
The problem is that the script only execute the first time: second time, ignores animate.
Whath I am doing wrong?. Thanks in advance
<?xml version='1.0' encoding='UTF-8'?>
<svg version='1.1' id='project' xmlns:svg='http://www.w3.org/2000/svg'
xmlns='http://www.w3.org/2000/svg'
xmlns:xlink='http://www.w3.org/1999/xlink'
onload='init(evt)'>
<script type='text/ecmascript'>
function init(evt) {
cmdButtonZoomPrevio = document.getElementById('cmdZoomPrevio');
cmdButtonZoomPrevio.addEventListener('mouseover', manejadorDeMouseHoverEnBotones);
cmdButtonZoomPrevio.addEventListener('mouseout', manejadorDeMouseOutEnBotones);
}
<![CDATA[
function manejadorDeMouseHoverEnBotones(evt) {
var pathVolatil = cmdButtonZoomPrevio.childNodes[1];
pathVolatil.setAttribute('fill','url(#rellenoZoomHover)');
}
function manejadorDeMouseOutEnBotones(evt) {
var pathVolatil = cmdButtonZoomPrevio.childNodes[1];
pathVolatil.setAttribute('fill','url(#rellenoZoom)');
}
//El botón cmdZoomPrevio;
var cmdButtonZoomPrevio;
]]>
</script>
<g id="cmdZoomPrevio" class="boton" toggleButton="false" triStateButton="false">
<path id="bordeZoomSE" fill="url(#rellenoZoom)" stroke="#000000" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M64.925,85.116c3.529,0,7.005-0.938,10.042-2.69c9.609-5.554,12.924-17.858,7.354-27.479l34.848-20.112
c16.633,28.863,6.753,65.771-22.063,82.438c-9.188,5.294-19.581,8.093-30.167,8.093L64.925,85.116L64.925,85.116z"/>
<g id="dibujocmdZoomSE">
<rect x="105.766" y="97.561" transform="matrix(0.8707 -0.4918 0.4918 0.8707 -34.1811 65.8925)" fill="#333333" width="4.92" height="0.784"/>
<polygon fill="#663300" points="104.234,87.553 109.439,96.827 109.439,96.897 106.586,98.467 106.518,98.467 101.313,89.191
101.313,89.118 104.165,87.553 "/>
<rect x="101.312" y="86.085" transform="matrix(0.8715 -0.4904 0.4904 0.8715 -29.6865 61.2979)" width="1.641" height="2.429"/>
<polygon fill="#006633" points="98.104,99.394 88.091,93.723 88.091,93.651 98.068,87.73 98.139,87.765 98.139,99.358 "/>
<path fill="none" stroke="#006633" stroke-width="2.15" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="3" d="
M98.104,93.543h0.854c3.382,0,6.298-0.593,8.771-1.783c2.373-1.182,3.586-2.61,3.643-4.281c-0.057-1.665-1.262-3.063-3.643-4.203
c-2.474-1.23-5.391-1.854-8.771-1.854c-3.467,0-6.413,0.616-8.835,1.854c-0.139,0.047-0.288,0.117-0.432,0.213"/>
<path fill="#CCFFFF" d="M97.752,86.978c-2.122-0.014-3.947-0.788-5.49-2.313c-1.463-1.474-2.184-3.263-2.174-5.354
c-0.01-2.103,0.714-3.925,2.174-5.457c1.531-1.458,3.348-2.183,5.454-2.179c2.113-0.006,3.911,0.717,5.38,2.179
c1.535,1.527,2.313,3.354,2.314,5.457c-0.006,2.105-0.779,3.892-2.314,5.354C101.635,86.195,99.85,86.966,97.752,86.978z"/>
<path fill="none" stroke="#0000FF" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="3" d="
M97.752,86.978c-2.096,0-3.9-0.761-5.42-2.288c-1.475-1.474-2.219-3.229-2.219-5.271c0-2.09,0.744-3.9,2.219-5.421
c1.52-1.479,3.324-2.226,5.42-2.226c2.089,0,3.873,0.738,5.344,2.226c1.522,1.475,2.285,3.271,2.285,5.421
c0,2.048-0.758,3.807-2.285,5.271C101.622,86.217,99.841,86.978,97.752,86.978z"/>
</g>
<defs>
<radialGradient id="rellenoZoomHover" cx="65" cy="65" r="65" gradientUnits="userSpaceOnUse">
<stop offset="0.5" style="stop-color:#FFFFFF">
<animate attributeName="stop-color" values="#FFFFFF;#81BEF7" dur="2s" repeatCount="1"/>
</stop>
<stop offset="1" style="stop-color:#81BEF7"/>
</radialGradient>
<radialGradient id="rellenoZoom" cx="65" cy="65" r="65" gradientUnits="userSpaceOnUse">
<stop offset="0.5" style="stop-color:#FFFFFF" />
<stop offset="1" style="stop-color:#A4A4A4"/>
</radialGradient>
</defs>
</g>
</svg>
The document has a timeline that begins at 0 and stays at 0 unless some animation runs. As an animation runs the timeline advances, in this case to 2 seconds as we have 2 seconds of animation.
The next time we hover the animation timeline is at 2 seconds, so the animation does not trigger again as the animation's start time has passed.
We could either
manually trigger the animation with javascript by calling beginElement(), this would affect just one animation
force the document timeline back to 0 this would affect all animations.
The code below demonstrates both (2. is commented out as we only need one technique)
<?xml version='1.0' encoding='UTF-8'?>
<svg version='1.1' id='project' xmlns:svg='http://www.w3.org/2000/svg'
xmlns='http://www.w3.org/2000/svg'
xmlns:xlink='http://www.w3.org/1999/xlink'
onload='init(evt)'>
<script type='text/ecmascript'>
function init(evt) {
cmdButtonZoomPrevio = document.getElementById('cmdZoomPrevio');
cmdButtonZoomPrevio.addEventListener('mouseover', manejadorDeMouseHoverEnBotones);
cmdButtonZoomPrevio.addEventListener('mouseout', manejadorDeMouseOutEnBotones);
}
<![CDATA[
function manejadorDeMouseHoverEnBotones(evt) {
var pathVolatil = cmdButtonZoomPrevio.childNodes[1];
pathVolatil.setAttribute('fill','url(#rellenoZoomHover)');
document.getElementById('rellenoZoomHoverAnimate').beginElement();
//document.getElementById('project').setCurrentTime(0);
}
function manejadorDeMouseOutEnBotones(evt) {
var pathVolatil = cmdButtonZoomPrevio.childNodes[1];
pathVolatil.setAttribute('fill','url(#rellenoZoom)');
}
//El botón cmdZoomPrevio;
var cmdButtonZoomPrevio;
]]>
</script>
<g id="cmdZoomPrevio" class="boton" toggleButton="false" triStateButton="false">
<path id="bordeZoomSE" fill="url(#rellenoZoom)" stroke="#000000" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M64.925,85.116c3.529,0,7.005-0.938,10.042-2.69c9.609-5.554,12.924-17.858,7.354-27.479l34.848-20.112
c16.633,28.863,6.753,65.771-22.063,82.438c-9.188,5.294-19.581,8.093-30.167,8.093L64.925,85.116L64.925,85.116z"/>
<g id="dibujocmdZoomSE">
<rect x="105.766" y="97.561" transform="matrix(0.8707 -0.4918 0.4918 0.8707 -34.1811 65.8925)" fill="#333333" width="4.92" height="0.784"/>
<polygon fill="#663300" points="104.234,87.553 109.439,96.827 109.439,96.897 106.586,98.467 106.518,98.467 101.313,89.191
101.313,89.118 104.165,87.553 "/>
<rect x="101.312" y="86.085" transform="matrix(0.8715 -0.4904 0.4904 0.8715 -29.6865 61.2979)" width="1.641" height="2.429"/>
<polygon fill="#006633" points="98.104,99.394 88.091,93.723 88.091,93.651 98.068,87.73 98.139,87.765 98.139,99.358 "/>
<path fill="none" stroke="#006633" stroke-width="2.15" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="3" d="
M98.104,93.543h0.854c3.382,0,6.298-0.593,8.771-1.783c2.373-1.182,3.586-2.61,3.643-4.281c-0.057-1.665-1.262-3.063-3.643-4.203
c-2.474-1.23-5.391-1.854-8.771-1.854c-3.467,0-6.413,0.616-8.835,1.854c-0.139,0.047-0.288,0.117-0.432,0.213"/>
<path fill="#CCFFFF" d="M97.752,86.978c-2.122-0.014-3.947-0.788-5.49-2.313c-1.463-1.474-2.184-3.263-2.174-5.354
c-0.01-2.103,0.714-3.925,2.174-5.457c1.531-1.458,3.348-2.183,5.454-2.179c2.113-0.006,3.911,0.717,5.38,2.179
c1.535,1.527,2.313,3.354,2.314,5.457c-0.006,2.105-0.779,3.892-2.314,5.354C101.635,86.195,99.85,86.966,97.752,86.978z"/>
<path fill="none" stroke="#0000FF" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="3" d="
M97.752,86.978c-2.096,0-3.9-0.761-5.42-2.288c-1.475-1.474-2.219-3.229-2.219-5.271c0-2.09,0.744-3.9,2.219-5.421
c1.52-1.479,3.324-2.226,5.42-2.226c2.089,0,3.873,0.738,5.344,2.226c1.522,1.475,2.285,3.271,2.285,5.421
c0,2.048-0.758,3.807-2.285,5.271C101.622,86.217,99.841,86.978,97.752,86.978z"/>
</g>
<defs>
<radialGradient id="rellenoZoomHover" cx="65" cy="65" r="65" gradientUnits="userSpaceOnUse">
<stop offset="0.5" style="stop-color:#FFFFFF">
<animate id="rellenoZoomHoverAnimate" attributeName="stop-color" values="#FFFFFF;#81BEF7" dur="2s" repeatCount="1"/>
</stop>
<stop offset="1" style="stop-color:#81BEF7"/>
</radialGradient>
<radialGradient id="rellenoZoom" cx="65" cy="65" r="65" gradientUnits="userSpaceOnUse">
<stop offset="0.5" style="stop-color:#FFFFFF" />
<stop offset="1" style="stop-color:#A4A4A4"/>
</radialGradient>
</defs>
</g>
</svg>
Related
Same SVG is repeated in carousel multiple times. Carousel is constructed in PHP using a while loop. How can I trigger animation at the click of a next/prev button in carousel?
My jQuery code is as below. It animates only the first <animate> tag. I think I must have explained my whole point.
jQuery(document).ready(function($){
$('.first').click(function(){
$('animate')[0].beginElement();
$('animateTransform')[0].beginElement();
});
});
My SVG code:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 425 386" style="enable-background:new 0 0 425 386;" xml:space="preserve">
<polygon class="st0" points="356.4,330 399.3,370.8 399.3,82.5 357.3,106.5 "/>
<polygon class="st1" points="63.8,105 63.8,329.3 357.3,329.3 357.3,106.5 "/>
<polygon class="st2" points="21.8,369 62.5,329.3 357.3,329.3 399.3,370.8 20.9,370.8 "/>
<polygon class="st0" points="63.8,329.2 20.9,370.8 20.9,82.5 63.8,105 "/>
<g>
<line class="st3" id="line1" x1="65.2" y1="76.3" x2="180.9" y2="76.3"/>
<animate xlink:href="#line1" attributeName="x2" from="65" to="180.9" dur="2s" class="ani" />
<line class="st3" id="line2" x1="237.6" y1="76.3" x2="338.6" y2="76.3"/>
<animate xlink:href="#line2" attributeName="x2" from="250" to="338.6" dur="2s" class="ani" />
<text x="200" y="80" class="wt1">10'</text>
</g>
<g>
<g>
<text x="368" y="70" class="wt1">5'</text>
</g>
<line class="st3" id="line3" x1="352.1" y1="76.9" x2="362.6" y2="70.8"/>
<animate xlink:href="#line3" attributeName="x2" from="351" to="362.6" dur="3s" class="ani" />
<animate xlink:href="#line3" attributeName="y2" from="77" to="70.8" dur="3s" class="ani" />
<line class="st3" id="line4" x1="387.7" y1="58" x2="396.6" y2="51.9"/>
<animate xlink:href="#line4" attributeName="x2" from="388" to="396.6" dur="3s" class="ani" />
<animate xlink:href="#line4" attributeName="y2" from="58" to="51.9" dur="3s" class="ani" />
</g>
<g>
<ellipse class="st4" id="elli1" cx="210.1" cy="344.8" rx="37.2" ry="4.5"/>
<animate xlink:href="#elli1" attributeName="rx" from="7.2" to="37.2" dur="3s" class="ani" />
<animate xlink:href="#elli1" attributeName="ry" from="0.2" to="4.5" dur="3s" class="ani" />
<g id="box1" transform="translate(0, 0)">
<polygon class="st5" points="230.8,307.5 213,307.5 213,307.9 213,314.1 207,314.1 207,307.5 189.2,307.5 188.9,345.4 231.2,345.4
"/>
<path class="st6" d="M207,307.3v-6.9c0-0.2,6-0.1,6-0.1v7.1h17.8l-8-7.1h-26.7l-7,7.1H207V307.3z"/>
<polygon class="st7" points="207,314.1 213,314.1 213,307.9 213,307.5 207,307.5 "/>
<path class="st8" d="M207,300.4v6.9v0.1h6v-7.1C213,300.4,207,300.2,207,300.4z"/>
<animateTransform xlink:href="#box1" attributeName="transform" type="translate" from="0 -70" to="0 0" dur="3s" class="ani" />
</g>
</g>
</svg>
You forgot to add a question style sheet. I restored the color values of the svg parts according to the figure.
Since all animations should start simultaneously at the click of a mouse, you can do without Javascript
To do this, add a launch command to each animation begin="Layer_1.click"
.container {
width:75%;
height:75%;
}
.st0 {fill:#C8C8C8;}
.st1 {fill:#E7E7E7;}
.st2 {fill:#6A6A6A;}
.st3 {stroke:#F6C44A;}
.st4 {fill:#323232;}
.st5 {fill:#CB9751;}
.st6 {fill:#E0B268;}
.st7 {fill:#C8A066;}
.st8 {fill:#E3C084;}
<div class="container">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 425 386" style="enable-background:new 0 0 425 386;" xml:space="preserve">
<polygon class="st0" points="356.4,330 399.3,370.8 399.3,82.5 357.3,106.5 "/>
<polygon class="st1" points="63.8,105 63.8,329.3 357.3,329.3 357.3,106.5 "/>
<polygon class="st2" points="21.8,369 62.5,329.3 357.3,329.3 399.3,370.8 20.9,370.8 "/>
<polygon class="st0" points="63.8,329.2 20.9,370.8 20.9,82.5 63.8,105 "/>
<g>
<line class="st3" id="line1" x1="65.2" y1="76.3" x2="180.9" y2="76.3"/>
<animate xlink:href="#line1" attributeName="x2" from="65" to="180.9" begin="Layer_1.click" dur="2s" class="ani" />
<line class="st3" id="line2" x1="237.6" y1="76.3" x2="338.6" y2="76.3"/>
<animate xlink:href="#line2" attributeName="x2" from="250" to="338.6" begin="Layer_1.click" dur="2s" class="ani" />
<text x="200" y="80" class="wt1">10'</text>
</g>
<g>
<g>
<text x="368" y="70" class="wt1">5'</text>
</g>
<line class="st3" id="line3" x1="352.1" y1="76.9" x2="362.6" y2="70.8"/>
<animate xlink:href="#line3" attributeName="x2" from="351" to="362.6" begin="Layer_1.click" dur="3s" class="ani" />
<animate xlink:href="#line3" attributeName="y2" from="77" to="70.8" begin="Layer_1.click" dur="3s" class="ani" />
<line class="st3" id="line4" x1="387.7" y1="58" x2="396.6" y2="51.9"/>
<animate xlink:href="#line4" attributeName="x2" from="388" to="396.6" begin="Layer_1.click" dur="3s" class="ani" />
<animate xlink:href="#line4" attributeName="y2" from="58" to="51.9" begin="Layer_1.click" dur="3s" class="ani" />
</g>
<g>
<ellipse class="st4" id="elli1" cx="210.1" cy="344.8" rx="37.2" ry="4.5"/>
<animate xlink:href="#elli1" attributeName="rx" from="7.2" to="37.2" begin="Layer_1.click" dur="3s" class="ani" />
<animate xlink:href="#elli1" attributeName="ry" from="0.2" to="4.5" begin="Layer_1.click" dur="3s" class="ani" />
<g id="box1" transform="translate(0, 0)">
<polygon class="st5" points="230.8,307.5 213,307.5 213,307.9 213,314.1 207,314.1 207,307.5 189.2,307.5 188.9,345.4 231.2,345.4
"/>
<path class="st6" d="M207,307.3v-6.9c0-0.2,6-0.1,6-0.1v7.1h17.8l-8-7.1h-26.7l-7,7.1H207V307.3z"/>
<polygon class="st7" points="207,314.1 213,314.1 213,307.9 213,307.5 207,307.5 "/>
<path class="st8" d="M207,300.4v6.9v0.1h6v-7.1C213,300.4,207,300.2,207,300.4z"/>
<animateTransform xlink:href="#box1" attributeName="transform" type="translate" from="0 -70" to="0 0" begin="Layer_1.click" dur="3s" class="ani" />
</g>
</g>
</svg>
</div>
This is my gauge, but I don't know a formula to render value of this gauge. Somebody can help me with this?
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="145" viewBox="0 0 200 145">
<defs>
<linearGradient id="b" x1="5.165%" y1="76.151%" y2="75.039%">
<stop offset="0%" stop-color="#E9F1FF"/>
<stop offset="100%" stop-color="#DBE7FF"/>
</linearGradient>
<linearGradient id="c" x1="63.192%" x2="36.891%" y1="13.157%" y2="100%">
<stop offset="0%" stop-color="#FF8600"/>
<stop offset="100%" stop-color="#FFC86A"/>
</linearGradient>
<path id="a" d="M100 0c55.228 0 100 44.772 100 100 0 15.954-3.736 31.036-10.382 44.418l-17.912-8.906c5.31-10.7 8.294-22.757 8.294-35.512 0-44.183-35.817-80-80-80s-80 35.817-80 80c0 12.843 3.027 24.98 8.405 35.735l-17.912 8.906C3.778 131.204 0 116.043 0 100 0 44.772 44.772 0 100 0z"/>
</defs>
<g fill="none" fill-rule="evenodd">
<mask id="c" fill="#fff">
<use xlink:href="#a"/>
</mask>
<use fill="url(#b)" xlink:href="#a"/>
<g stroke="#FFF" stroke-width="5" mask="url(#c)" opacity=".3">
<path d="M99.5 97V0M100.252 97.061L110.392.593M100.16 97.06l21.821-94.513M100.885 97.276l31.58-91.715M100.8 97.241l42.523-87.183M101.465 97.6l51.402-82.26M101.399 97.536l61.044-75.383M101.976 98.025l68.589-68.59M102.463 98.6l75.383-61.043M102.4 98.536l82.26-51.403M102.759 99.199l87.183-42.522M102.725 99.115l91.715-31.58M102.94 99.839l94.513-21.82M102.939 99.747l96.468-10.139M103 100.5h97M102.939 101.253l96.469 10.139M102.94 101.16l94.513 21.821M102.724 101.884l91.715 31.58M102.759 101.8l87.183 42.523M102.399 102.465l82.26 51.402M102.464 102.4l75.383 61.044M101.974 102.975l68.59 68.59M101.4 103.464l61.044 75.383M101.464 103.4l51.402 82.26M100.801 103.76l42.522 87.182M100.884 103.724l31.58 91.716M100.161 103.94l21.82 94.513M100.253 103.939l10.139 96.468M99.5 104v97M98.747 103.939l-10.139 96.468M98.839 103.94l-21.82 94.513M98.116 103.724l-31.58 91.716M98.199 103.76l-42.522 87.182M97.536 103.4l-51.402 82.26M97.6 103.464l-61.044 75.383M97.026 102.975l-68.59 68.59M96.536 102.4l-75.383 61.044M96.601 102.465l-82.26 51.402M96.241 101.8L9.058 144.324M96.276 101.884l-91.715 31.58M96.06 101.16L1.548 122.982M96.061 101.253L-.408 111.392M96 100.5H-1M96.061 99.747L-.407 89.608M96.06 99.839L1.548 78.019M96.275 99.115L4.56 67.535M96.241 99.199L9.058 56.677M96.6 98.536L14.34 47.133M96.537 98.6L21.154 37.558M97.024 98.025l-68.589-68.59M97.601 97.536L36.557 22.153M97.535 97.6L46.133 15.34M98.2 97.241L55.676 10.058M98.115 97.276L66.535 5.56M98.84 97.06L77.018 2.548M98.748 97.061L88.608.593"/>
</g>
</g>
<path fill="none" fill-rule="evenodd" stroke="url(#c)" stroke-width="20" d="M72.705 14.214C36.343 25.773 10 59.81 10 100c0 14.45 3.405 28.105 9.457 40.205"/>
</svg>
As #enxaneta pointed out, you should better use strokes.
To display percentage based value segments on your gauge you will foremost need these attributes:
stroke-dasharray: defines the length of segement
stroke-dashoffset: gives you the ability to move your segment
pathlength: changes the computation values ration applied on the stroke-dash attributes
pathlength="100" show 25/100 – useful, if you're working with percentages (e.g. retrieved by some api)
pathlength="100"
stroke-dashoffset="0"
stroke-dasharray="25 100"
pathlength="12" show 3/12 – really handy if you get 'stepped' integer values
pathlength="12"
stroke-dashoffset="0"
stroke-dasharray="3 12"
MDN: pathLength
Here is a rebuild of you gauge using strokes:
svg{
border:1px solid #ccc;
width:33%
}
.gauge-segment{
transition: 0.3s;
}
svg:hover .gauge-segment{
stroke-dashoffset:-33;
stroke-dasharray: 66 100;
}
<p>Hover will change the gauge segment</p>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 120">
<defs>
<linearGradient id="gradientBackground" gradientTransform="rotate(30)">
<stop offset="0%" stop-color="#E9F1FF"/>
<stop offset="100%" stop-color="#DBE7FF"/>
</linearGradient>
<linearGradient id="gradientSegment" x1="63.192%" x2="36.891%" y1="13.157%" y2="100%">
<stop offset="0%" stop-color="#FF8600"/>
<stop offset="100%" stop-color="#FFC86A"/>
</linearGradient>
</defs>
<!-- gauge path -->
<symbol id="stroke">
<path pathlength="100" fill="none" stroke-width="10" d="M55.6,103C52,96.1,50,88.3,50,80
c0-27.6,22.4-50,50-50s50,22.4,50,50c0,8.3-2,16.1-5.6,23"/>
</symbol>
<!-- gauge background -->
<g id="gaugeBackground" >
<use id="gaugeBackgroundColor" href="#stroke" stroke="url(#gradientBackground)"></use>
<use id="gaugeBackgroundDash" href="#stroke" stroke="#E9F1FF" stroke-dashoffset="0" stroke-dasharray="1 1" ></use>
</g>
<!-- percentages -->
<g id="gaugeSegments" >
<use id="segment01" class="gauge-segment" href="#stroke" filter="" stroke="url(#gradientSegment)" stroke-dashoffset="0" stroke-dasharray="33 100"></use>
</g>
</svg>
I have this SVG file... I want to add some text when clicking to rectangles and it shouldn't for the black one... Like when i click on any rectangle then it should be >> g rectangle text /g
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="1200px" height="800px" viewBox="0 0 1200 800" enable-background="new 0 0 1200 800" xml:space="preserve">
<!-- <rect x="50.683" y="111.41" fill="#FFFFFF" stroke="#231F20" stroke-width="3" stroke-miterlimit="10" width="1116.428" height="578.514"/> -->
<rect x="76.564" y="133.804" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.682" height="84.682"/>
<rect x="173.42" y="133.804" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.683" height="84.682"/>
<rect x="270.276" y="133.804" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.682" height="84.682"/>
<rect x="367.133" y="133.804" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.683" height="84.682"/>
<rect x="463.989" y="133.804" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.683" height="84.682"/>
<rect x="667.414" y="133.804" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.682" height="84.682"/>
<rect x="764.27" y="133.804" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.682" height="84.682"/>
<rect x="861.126" y="133.804" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.683" height="84.682"/>
<rect x="957.983" y="132.216" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.681" height="84.682"/>
<rect x="1054.839" y="132.216" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.683" height="84.682"/>
<rect x="41.042" y="351.442" fill="#FFFFFF" width="23.851" height="112.15"/>
<rect x="31.853" y="375.293" fill="#494849" width="1118.006" height="65.463"/>
<rect x="76.564" y="252.552" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.682" height="84.682"/>
<rect x="173.42" y="252.552" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.683" height="84.682"/>
</svg>
You will need to create the text node. The x and y of the text - in this case - is the center of the rect.
Please read the comments in my code.
const SVG_NS = 'http://www.w3.org/2000/svg';
//the array of the rects with a white fill
let rects = Array.from(svg.querySelectorAll("rect[fill='#FFFFFF']"));
//an array of true values as long as the rects array
let arr = Array(rects.length).fill(true);
//for each rect in the rects array
rects.forEach((r,i)=>{
//get the position end the size of the rect (the bounding box)
let bb = r.getBBox();
//the center of the rect
let x = bb.x + bb.width/2;
let y = bb.y + bb.height/2;
//on click
r.addEventListener("click", ()=>{
//if there isn't already a text element there
if(arr[i]){
//add a text element
let txt = drawSVGelmt({x:x,y:y},"text", svg)
txt.textContent = i;
arr[i] = false;
}
})
})
// a function to create a new svg element
function drawSVGelmt(o,tag, parent) {
let elmt = document.createElementNS(SVG_NS, tag);
for (var name in o) {
if (o.hasOwnProperty(name)) {
elmt.setAttributeNS(null, name, o[name]);
}
}
parent.appendChild(elmt);
return elmt;
}
text{text-anchor:middle; dominant-baseline:middle}
<svg id="svg" width="1200px" height="800px" viewBox="0 0 1200 800" >
<rect x="76.564" y="133.804" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.682" height="84.682"/>
<rect x="173.42" y="133.804" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.683" height="84.682"/>
<rect x="270.276" y="133.804" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.682" height="84.682"/>
<rect x="367.133" y="133.804" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.683" height="84.682"/>
<rect x="463.989" y="133.804" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.683" height="84.682"/>
<rect x="667.414" y="133.804" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.682" height="84.682"/>
<rect x="764.27" y="133.804" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.682" height="84.682"/>
<rect x="861.126" y="133.804" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.683" height="84.682"/>
<rect x="957.983" y="132.216" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.681" height="84.682"/>
<rect x="1054.839" y="132.216" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.683" height="84.682"/>
<rect x="41.042" y="351.442" fill="#FFFFFF" width="23.851" height="112.15"/>
<rect x="31.853" y="375.293" fill="#494849" width="1118.006" height="65.463"/>
<rect x="76.564" y="252.552" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.682" height="84.682"/>
<rect x="173.42" y="252.552" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.683" height="84.682"/>
</svg>
Observation: since the user can click many time on one rect I needed to add a condition. If there is no text node there create one, else don't.
I'm trying to draw a simple svg as the user scrolls down on the viewport. I'm using skrollr because it's meant to be simple, but I can not make it work.
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1610.2 1604.6" style="enable-background:new 0 0 1610.2 1604.6;" xml:space="preserve">
<style type="text/css">
.st0{fill:#1D1D1D;}
.st1{fill:none;stroke:#666666;stroke-miterlimit:10;}
.st2{fill:none;stroke:#666666;stroke-width:1.0674;stroke-miterlimit:10;}
.st3{fill:#666666;}
.st4{fill:url(#SVGID_1_);stroke:#666666;stroke-miterlimit:10;}
.st5{fill:#161616;stroke:#666666;stroke-miterlimit:10;}
.st6{fill:url(#SVGID_2_);stroke:#666666;stroke-miterlimit:10;}
.st7{fill:#F7F7F7;}
</style>
<rect data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;" x="-397.1" y="-1042.5" class="" width="447.4" height="295"/>
<line data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;" class="st1" x1="-400" y1="-988.5" x2="-86" y2="-988.5"/>
<line data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;" class="st1" x1="-7" y1="-989" x2="50.3" y2="-988.5"/>
<rect data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;" x="-74.5" y="-1016.3" transform="matrix(0.7071 -0.7071 0.7071 0.7071 685.2816 -322.584)" class="st2" width="55.5" height="55.5"/>
<path data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;" class="st3" d="M-46.8-1025.2L-46.8-1025.2c-1.4,0-2.6-1.1-2.6-2.6l0,0c0-1.4,1.1-2.6,2.6-2.6h0c1.4,0,2.6,1.1,2.6,2.6l0,0
C-44.2-1026.3-45.3-1025.2-46.8-1025.2z"/>
<path data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;" class=" st3" d="M-46.8-946.9L-46.8-946.9c-1.4,0-2.6-1.1-2.6-2.6l0,0c0-1.4,1.1-2.6,2.6-2.6h0c1.4,0,2.6,1.1,2.6,2.6l0,0
C-44.2-948-45.3-946.9-46.8-946.9z"/>
<path data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;" class="st3" d="M-7.7-985.9L-7.7-985.9c-1.4,0-2.6-1.1-2.6-2.6l0,0c0-1.4,1.1-2.6,2.6-2.6h0c1.4,0,2.6,1.1,2.6,2.6l0,0
C-5.1-987.1-6.3-985.9-7.7-985.9z"/>
<path data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;" class="st3" d="M50.3-986.2L50.3-986.2c-1.2,0-2.2-1-2.2-2.2l0,0c0-1.2,1-2.2,2.2-2.2h0c1.2,0,2.2,1,2.2,2.2l0,0
C52.6-987.3,51.6-986.2,50.3-986.2z"/>
<path data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;" class="st3" d="M-86-985.9L-86-985.9c-1.4,0-2.6-1.1-2.6-2.6l0,0c0-1.4,1.1-2.6,2.6-2.6l0,0c1.4,0,2.6,1.1,2.6,2.6l0,0
C-83.4-987.1-84.6-985.9-86-985.9z"/>
<linearGradient data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;" id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="885.6667" y1="-1039.5" x2="885.6667" y2="-410.7027">
<stop offset="0" style="stop-color:#212121"/>
<stop offset="1" style="stop-color:#212121"/>
</linearGradient>
<polygon data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;" class="st4" points="50.3,-1042.5 50.3,-378.5 1721,-1040.5 "/>
<polygon class="st5" points="1721,-1040.5 2302.9,-1040.5 1564.7,-747.5 981.6,-747.5 "/>
<linearGradient id="SVGID_2_" data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;" gradientUnits="userSpaceOnUse" x1="1564.6666" y1="-894" x2="2302.9167" y2="-894">
<stop offset="0" style="stop-color:#212121"/>
<stop offset="1" style="stop-color:#212121"/>
</linearGradient>
<polygon data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;" class="st6" points="2302.9,-747.5 2302.9,-1040.5 1564.7,-747.5 "/>
<rect x="393" y="-926.5" class="st7" width="593" height="434"/>
<g data-0="stroke-dashoffset:1500;" data-end="stroke-dashoffset:0;" >
<polyline class="st1" points="2.5,0 2.5,162 43.2,162 43.2,30 748.7,30 748.7,162 916.7,162 1516.8,162 1607.7,162 1607.7,911.1
1512.8,911.1 1512.8,778.1 815.8,778.1 815.8,912.1 641.7,912.1 293.8,912.1 293.8,1264.1 293.8,1597.1 343.3,1597.1 343.3,1462.1
1040.8,1462.1 1040.8,1602.1 1108.2,1602.1 "/>
<circle class="st3" cx="2.5" cy="162" r="2.5"/>
<circle class="st3" cx="43.2" cy="162" r="2.5"/>
<circle class="st3" cx="748.7" cy="162" r="2.5"/>
<circle class="st3" cx="1512.9" cy="778.1" r="2.5"/>
<circle class="st3" cx="1512.8" cy="911" r="2.5"/>
<circle class="st3" cx="1607.7" cy="911" r="2.5"/>
<circle class="st3" cx="815.8" cy="778.4" r="2.5"/>
<circle class="st3" cx="815.7" cy="912.1" r="2.5"/>
<circle class="st3" cx="293.8" cy="1597" r="2.5"/>
<circle class="st3" cx="343.5" cy="1597" r="2.5"/>
<circle class="st3" cx="343.2" cy="1462.2" r="2.5"/>
<circle class="st3" cx="1040.8" cy="1462" r="2.5"/>
<circle class="st3" cx="1040.7" cy="1602.1" r="2.5"/>
</g>
</svg>
Here is a pen to my code:
http://codepen.io/ohmmho/pen/zqjbRW
May be I'm setting the data-end/start points to the wrong elements? There are elements like 'line' and 'rect' that confuse me, I'm learning SVG animations. Some light on this would be appreciated.
Thanks ;)
Finally, after a further research, I found out what I was doing wrong: Those shape elements like circle or polygon need to be paths in order to accomplish what I'm trying. You can export your svg file from Illustrator properly or convert them with some tools, more info on this here.
My codepen works now :D
You can only draw in objects with a stroke.
In your svg only these classed elements have a stroke:
.st1{fill:none;stroke:#666666;stroke-miterlimit:10;}
.st2{fill:none;stroke:#666666;stroke-width:1.0674;stroke-miterlimit:10;}
You also need to offset this stroke with css:
style="stroke-dasharray:2000;stroke-dashoffset:2000"
And try these attribute values- you can use any of the Skrollr options:
(you are either moving the line from a value off set to 0, or from 0 to an offset (to draw out an object)
data-top="stroke-dashoffset:0;"
data-center-top="stroke-dashoffset:2000;"
I have some SVG elements on which there are some pattern already applied. The pattern is applied as fill color. That means the pattern fills up whole SVG element. Basically i want to partially fill up my element using the pattern.
Example
After applying pattern:
I want this pattern to apply on bottom half of the circle. Is there any way to do that?
What you could do is create two circles and apply mask on one with fill
<svg width="105px" height="105px">
<mask x="0" y="0" id="half">
<rect y="50%" fill="white" width="100%" height="50%" />
</mask>
<circle fill="transparent" stroke="black" stroke-width="3px" cx="50%" cy="50%" r="50"/>
<circle fill="#C04C4C" mask="url(#half)" stroke="black" stroke-width="3px" cx="50%" cy="50%" r="50"/>
</svg>
use something like this
<svg height="300" width="300">
<defs>
<linearGradient id="Gradient-1" x1="50%" y1="0%" x2="50%" y2="100%">
<stop offset="50%" stop-color= "white" />
<stop offset="51%" stop-color= "red" />
</linearGradient>
<linearGradient id="repeat"xlink:href="#Gradient-1" spreadMethod="repeat" />
</defs>
<circle cx="100" cy="100" r="100"
fill= "url(#repeat)"
stroke="#000000"
stroke-width="1px" />
</svg>