search

Tebaeleven / svg_blocks

https://tebaeleven.github.io/svg_blocks/src/v3_class/
0 stars 0 forks source link

svgにinputを追加したい #2

Closed Tebaeleven closed 1 year ago

Tebaeleven commented 1 year ago

参考

https://qiita.com/mizchi/items/b63d4695c50c80d7f7e2 https://gist.github.com/hsuh/05c216f2235c767319ec

style変更

http://write-off.cside.com/scripts/css/transtext.htm https://csshtml.work/input-border-none/

Tebaeleven commented 1 year ago

image

    <svg transform="scale(2)" width="100" height="100" viewBox="0, 0, 100, 100" xmlns="http://www.w3.org/2000/svg">
        <rect x="10" y="10" width="50" height="30" rx="10" ry="10" fill="#e74c3c" stroke="red" stroke-width="5" />
        <foreignObject x="20" y="12" width="30" height="150">
            <input type="text" id="input-size" value="100" style="background-color:transparent;border: none; outline: none;">
        </foreignObject>
    </svg>