Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE HTML>
<style id="style"></style>
<svg width="300" height="180" style="border: 1px solid black;">
    <text id="text1" x="50" y="40">text1</text>
    <text id="text2" x="50" y="80">text2</text>
    <g id="g3"><text id="text3" x="50" y="120">text3</text></g>
    <g id="g4"><text id="text4" x="50" y="160">text4</text></g>
    <path id="path1" stroke-width="1" stroke="black"></path>
    <path id="path2" stroke-width="1" stroke="black"></path>
</svg>
​
<div id="log"></div>
​
<script>
    var style = document.getElementById('style');
    var text1 = document.getElementById('text1');
    var text2 = document.getElementById('text2');
    var text3 = document.getElementById('text3');
    var g3 = document.getElementById('g3');
    var text4 = document.getElementById('text4');
    var g4 = document.getElementById('g4');
    var path1 = document.getElementById('path1');
    var log = document.getElementById('log');
​
    log.innerHTML += 'without attribute or property, text1 height: ' + text1.getBBox().height + '<br>';
    text1.setAttribute('font-size', '30px');
    log.innerHTML += 'after synchronously setting an attribute, text1 height: ' + text1.getBBox().height + '<br>';
    style.innerHTML += '#text1 { font-size: 40px; } ';
    log.innerHTML += 'after synchronously setting a property, text1 height: ' + text1.getBBox().height + '<br>';
​
    log.innerHTML += '<br>';
​
    log.innerHTML += 'without attribute or property, text2 computed style for font-size: ' + window.getComputedStyle(text2)['font-size'] + '<br>';
    text2.setAttribute('font-size', '30px');
    log.innerHTML += 'after synchronously setting an attribute, text2 computed style for font-size: ' + window.getComputedStyle(text2)['font-size'] + '<br>';
    style.innerHTML += '#text2 { font-size: 40px; } ';
    log.innerHTML += 'after synchronously setting a property, text2 computed style for font-size: ' + window.getComputedStyle(text2)['font-size'] + '<br>';
​
    log.innerHTML += '<br>';
​
    log.innerHTML += 'without attribute or property, text3 height: ' + text3.getBBox().height + '<br>';
    g3.setAttribute('font-size', '30px');
    log.innerHTML += 'after synchronously setting an attribute on g3, text3 height: ' + text3.getBBox().height + '<br>';
    style.innerHTML += '#g3 { font-size: 40px; } ';
    log.innerHTML += 'after synchronously setting a property on g3, text3 height: ' + text3.getBBox().height + '<br>';
​
    log.innerHTML += '<br>';
​
    log.innerHTML += 'without attribute or property, text4 computed style for font-size: ' + window.getComputedStyle(text4)['font-size'] + '<br>';
    g4.setAttribute('font-size', '30px');
    log.innerHTML += 'after synchronously setting an attribute on g4, text4 computed style for font-size: ' + window.getComputedStyle(text4)['font-size'] + '<br>';
    style.innerHTML += '#g4 { font-size: 40px; } ';
    log.innerHTML += 'after synchronously setting a property on g4, text4 computed style for font-size: ' + window.getComputedStyle(text4)['font-size'] + '<br>';
​
    log.innerHTML += '<br>';
​
    log.innerHTML += 'without attribute or property, path1 getTotalLength(): ' + path1.getTotalLength() + '<br>';
    path1.setAttribute('d', 'M200 50L220 50Z');
    log.innerHTML += 'after synchronously setting an attribute, path1 getTotalLength(): ' + path1.getTotalLength() + '<br>';
    style.innerHTML += '#path1 { d: path("M200 50L240 50Z"); } ';
    log.innerHTML += 'after synchronously setting a property, path1 getTotalLength(): ' + path1.getTotalLength() + '<br>';
​
    log.innerHTML += '<br>';
​
    log.innerHTML += 'without attribute or property, path2 width: ' + path2.getBBox().width + '<br>';
    path2.setAttribute('d', 'M200 150L220 150Z');
    log.innerHTML += 'after synchronously setting an attribute, path2 width: ' + path2.getBBox().width + '<br>';
    style.innerHTML += '#path2 { d: path("M200 150L240 150Z"); } ';
    log.innerHTML += 'after synchronously setting a property, path2 width: ' + path2.getBBox().width + '<br>';
</script>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers