CSS свойство border не отражается на тексте svg - PullRequest
Новая
       0

CSS свойство border не отражается на тексте svg

0 голосов
/ 03 февраля 2020

Свойство border не применяется к тексту SVG. Я не хочу использовать свойство outline, так как оно не поддерживает разные цвета для разных сторон, а также я не хочу использовать дополнительные элементы svg, такие как rect или path, так как это усложнит мою задачу в целом. Пожалуйста, укажите, как я могу применить границы css к текстовому элементу SVG. 

<body>
  <style>
    #abc {
      border: 1px solid green;
    }
  </style>
  <svg height="100" width="200">
      <text x="10" y="25" fill="red" id="abc">I love SVG!</text>
      Sorry, your browser does not support inline SVG.
    </svg>

</body>

Ответы [ 3 ]

0 голосов
/ 03 февраля 2020 

<!DOCTYPE html>
<html>
<body>
<style>
.abc { height: 25px;
    border: 1px solid green;
    width: 88px;}
</style>
<svg class="abc">
  <text x="5" y="18" fill="red">I love SVG!</text>
  Sorry, your browser does not support inline SVG.
</svg>

</body>
</html>
0 голосов
/ 05 февраля 2020

извините, я не думаю, что это возможно, я проверил детей объекта svg dom, что определение стиля границы отсутствует. проверьте онлайн-редактор:

  1. https://vectorpaint.yaks.co.nz/
  2. https://editor.method.ac/

или используйте некоторые бесплатный API для упрощения вещей, если ваш проект зависит от svgs:

  1. http://snapsvg.io/docs/ 

<svg width="211" height="35" xmlns="http://www.w3.org/2000/svg">
  <text fill="#000000" stroke="#000" stroke-width="0" x="1.75" y="24.75" id="svg_1" font-size="24" font-family="Helvetica, Arial, sans-serif" text-anchor="start" xml:space="preserve">text test hello world</text>
  <rect fill="none" stroke="#000" stroke-width="1.5" x="0.75" y="0.75" width="209" height="33" id="svg_2"></rect>
</svg>
</body>
0 голосов
/ 03 февраля 2020 

<body>
  <style>
    #abc {
      border: 1px solid green;
    }
  </style>
  <svg height="40" width="100" id="abc">
      <text x="10" y="25" fill="red" >I love SVG!</text>
      Sorry, your browser does not support inline SVG.
    </svg>

</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...