使用SVG矢量图来说明圆直径半径概念 - 踏得网

illustrating the circle radius with SVG

svg, math

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 4745
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<svg viewBox='-13 -7 34 17' xmlns='https://www.w3.org/2000/svg' xmlns:xlink='https://www.w3.org/1999/xlink'>
    <style>
        svg {
            stroke: #444;
            stroke-width: .08px;
            fill: none;
            font: .8px consolas
        }
        [r='6'] {
            stroke: #9351a6
        }
        [r='3'] {
            stroke: #d49b00
        }
        [r='1'] {
            stroke: #e18728
        }
        [r*='.1'] {
            fill: #bbb
        }
        #a1+* {
            stroke: #bbb;
            stroke-width: .05px
        }
        [d*=A] {
            stroke: #be4c39
        }
        g {
            marker-start: url(#a);
            marker-end: url(#a1)
        }
        [id*=a] *,
        text {
            stroke: none;
            fill: #444
        }
    </style>
    <marker id='a' viewBox='-8 -4 8 8' refX='-7' markerWidth='5' markerHeight='5' orient='auto'>
        <path d='M-8 0 0-4V4' />
    </marker>
    <marker id='a1' viewBox='0 -4 8 8' refX='7' markerWidth='5' markerHeight='5' orient='auto'>
        <path d='M8 0 0-4V4' />
    </marker>
    <path d='M13-6H0V9 M0 0h11 M0-2h9 M0-3h7 M0-4h9 M0 6h13 M0 3h8 M-6 0V9 M-3 3V7 M6 0V9 M3 3V7' />
    <circle r='6' />
    <g id='c'>
        <circle r='3' cy='3' />
        <circle r='1' cy='3' />
    </g>
    <use xlink:href='#c' y='-6' />
    <path d='M0 6A6 6 0 0 1 0-6A3 3 0 0 1 0 0A3 3 0 0 0 0 6' />
    <g id='q'>
        <g id='p'>
            <circle r='.1' cy='2' />
            <circle r='.1' />
        </g>
        <use xlink:href='#p' y='4' />
        <circle r='.1' cy='3' />
    </g>
    <use xlink:href='#q' y='-6' />
    <circle r='.1' cx='-6' />
    <circle r='.1' cx='6' />
    <circle r='.1' cx='-3' cy='3' />
    <circle r='.1' cx='3' cy='3' />
    <g id='m'>
        <path d='M8-6v2' />
        <text x='8.2' y='-4.75'>r/3</text>
    </g>
    <use xlink:href='#m' y='2' />
    <use xlink:href='#m' y='4' />
    <g id='m1'>
        <path d='M10.5 0v6' />
        <text x='10.7' y='3.25'>r</text>
    </g>
    <use xlink:href='#m1' y='-6' />
    <g id='m3'>
        <g id='m2'>
            <path d='M-6 6.5h3' />
            <text x='-5.15' y='7.3'>r/2</text>
        </g>
        <use xlink:href='#m2' x='3' />
        <path d='M-6 8.5h6' />
        <text x='-3.15' y='9.3'>r</text>
    </g>
    <use xlink:href='#m3' x='6' />
    <g id='m4'>
        <path d='M7 0v3' />
        <text x='7.3' y='1.7'>r/2</text>
    </g>
    <use xlink:href='#m4' y='3' />
    <g>
        <path d='M6.5-2v1m0-3v1' />
        <text x='5.8' y='-2.25'>r/6</text>
        <path d='M12.5-6V6' />
        <text x='13' y='.25'>d = 2·r</text>
        <text x='9' y='8'>r = d/2</text>
    </g>
</svg>