【CSS】文字の縁取り　SVG

表示させる内容ごとにidが必要。useのxlink:hrefにはこのidを入れる。

  

<div class="c-inner__flex p-s22__center-1">
 

                <div class="svgSample1">
                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
                        <defs>
                            <text dy="0.4em" id="outTextx">グループホーム各社から</text>
                        </defs>
                        <use x="50%" y="50%" xlink:href="#outTextx"></use>
                        <use x="50%" y="50%" xlink:href="#outTextx"></use>
                    </svg>
                </div>

                <div class="svgSample1">
                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
                        <defs>
                            <text dy="0.4em" id="outTextx1-2">多数のご要望を受け、</text>
                        </defs>
                        <use x="50%" y="50%" xlink:href="#outTextx1-2"></use>
                        <use x="50%" y="50%" xlink:href="#outTextx1-2"></use>
                    </svg>
                </div>
            </div>


            <div class="c-inner__flex p-s22__center">
                <div class="svgSample2large">

                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
                        <defs>
                            <text dy="0.4em" id="outTextx2-l">自動シフト生成クラウド</text>
                        </defs>
                        <use x="50%" y="50%" xlink:href="#outTextx2-l"></use>
                        <use x="50%" y="50%" xlink:href="#outTextx2-l"></use>
                    </svg>

                </div>
                <div class="svgSample2">

                    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
                        <defs>
                            <text dy="0.4em" id="outTextx2">がこの秋、新リリース!</text>
                        </defs>
                        <use x="50%" y="50%" xlink:href="#outTextx2"></use>
                        <use x="50%" y="50%" xlink:href="#outTextx2"></use>
                    </svg>

                </div>

            </div><!-- /.c-inner__flex -->

Table of Contents

Toggle

この記事を書いた人

aimei

aimeiです。一日中、生活必須時間以外はコーディングしています。SEO対策も大好物です。

最新の投稿

• 未分類2025年9月2日Figma MCP Cursor　利用手順
• 未分類2025年7月28日仕事が早い人の３つの特徴【無料】セルフチェックシート配布
• figma,photoshop,xd2025年6月24日【Photoshop×Zeplin】 PhotoshopからZeplinにLPを送る方法
• 未分類2025年3月25日家事の段取りが悪い人必見！効率よく片付け＆時短料理ができる習慣

aimei

aimeiです。一日中、生活必須時間以外はコーディングしています。SEO対策も大好物です。