【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 -->