Question

我创建了一个带有多行文字的内联SVG。

我希望使用LTR（从左到右）和RTL（从右到左）支持。是否可以使用SCSS / CSS或Javascript解决它。

我添加了代码，它打破了RTL视图上的svg图像。

$(document).ready(function() {
	$("#btn").on('click', function() {
    if($('html').is("[dir=rtl]")){
      $('html').attr('dir', 'ltr');
    } else {
    	$('html').attr('dir', 'rtl');
    }
  });
});

body{
  background: #F3F5F6;
}
.center{ text-align: center; }

.Dtls {
  opacity: 1;
}
.clip {
  clip-path: url(#clip-cm);
}

.fill-theme {
  fill: #fff;
}

.fill-theme {
  fill-rule: evenodd;
}

.cardOverlayBg {
  opacity: 0.6;
}

.infoTextColor {
  fill: #fefffa;
  font-size: 22px;
  font-weight: 600;
}

.textContent {
  font-size: 16px;
  font-weight: 400;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="center">
  <a href="javascript:;" id="btn">Toggle LTR - RTL</a>
</div>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 954 640">
  <defs>
    <clipPath id="clip-cm">
      <rect width="954" height="640"/>
    </clipPath>
  </defs>
  <g id="cm" class="clip cm">
    <g id="ae" class="Dtls" transform="translate(155 20)">
      <rect id="ae-card" class="fill-theme" width="544" height="326" rx="5" transform="translate(19 19)"/>
      <path id="ae-bg" class="cardOverlayBg" d="M19,204H563V341a4,4,0,0,1-4,4H23a4,4,0,0,1-4-4Z"/>
      <text id="ae-text" class="infoTextColor" transform="translate(304.311 244.328)"><tspan x="-129.052" y="0">Lorem, Ipsum (Dolor Sit)</tspan><tspan class="textContent"><tspan x="-133.136" y="19.2">Amet consectetur adipisicing elit adip </tspan><tspan x="-122.504" y="38.4">Deserunt: impedit, reprehenderit</tspan><tspan x="-181.704" y="57.6">reprehenderit ducimus culpa, cumque aperiam cumque</tspan><tspan x="-144.04" y="76.8">dolor illum error | optio inventore ducimus</tspan></tspan></text>
    </g>
  </g>
</svg>

如何使用具有LTR和RTL支持的内联SVG多行文本

0 个答案: