SVG текст с клип-путь не обрезается правильно? - PullRequest
Новая
       36

SVG текст с клип-путь не обрезается правильно?

0 голосов
/ 18 октября 2018

У нас есть проблема с применением clipPath к текстовому элементу в svg ниже.

<!DOCTYPE html>
<html>

<head>
  <title>Svg clipping issue</title>
</head>

<body>
  <div style="width:500px;height:180px;">
    <svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" height="100%"
      width="100%">
      <defs>
        <clipPath id="myClip">
          <rect transform="matrix(1,-0,-0,1,-0,-25.7478256)" x="198.1017" y="98.565216" width="65" height="25"></rect>
        </clipPath>
      </defs>
      <polygon points="198.1017,98.565216 263.84082,98.565216 263.84082,72.817383 198.1017,72.817383" clip-path="url(#myClip)"
        fill="#FF0000" stroke-width="none"></polygon>
      <text transform="matrix(1,-0,-0,1,-0,-25.7478256)" clip-path="url(#myClip)" font-family="Microsoft Sans Serif"
        font-size="8.25pt" fill="#000000">
        <tspan text-anchor="middle" x="230.6017" y="108.755646">Line 1</tspan>
        <tspan text-anchor="middle" x="230.6017" y="121.205841">A very very long line</tspan>
      </text>
      <rect transform="matrix(1,-0,-0,1,-0,-25.7478256)" x="198" y="98" width="65" height="25" fill="none" stroke="#0000FF"></rect>

    </svg>
  </div>
</body>

</html>

ClipPath применяется к многоугольнику и текстовому элементу.На полигоне clipPath работает правильно, так как мы все еще видим многоугольник.

В тексте есть проблема, что весь текст обрезан , но должен выглядеть как this .

Если мы удалим clipPath из текстового элемента, мы, очевидно, сможем увидеть весь текст, но это не то, что нам нужно.

Кто угодноидея, что происходит, или это ошибка рендеринга в браузере?Мы получаем тот же результат на Firefox, Chrome, Edge, IE.

Ответы [ 2 ]

0 голосов
/ 18 октября 2018

Проблема, с которой вы столкнулись, заключается в том, что любое преобразование, которое применяется к элементу, также применяется к присоединенному к нему пути клипа.Таким образом, ваш путь клипа будет преобразован дважды с помощью 

transform="matrix(1,-0,-0,1,-0,-25.7478256)"

, который находится на элементе <text>, а также на элементе <clipPath>.

Это можно исправить несколькими способами:

  1. Удалите transform из элемента <text> и измените его координаты, чтобы он был правильно над прямоугольником.Или сделайте обратное к прямоугольнику.
  2. Оберните прямоугольник и текст в группе и примените к нему путь обрезки (как предложил @Mehdi)
  3. Создайте отдельный <clipPath> без преобразования. См. Пример ниже 

<!DOCTYPE html>
<html>

<head>
  <title>Svg clipping issue</title>
</head>

<body>
  <div style="width:500px;height:180px;">
    <svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" height="100%"
      width="100%">
      <defs>
        <clipPath id="myClip">
          <rect transform="matrix(1,-0,-0,1,-0,-25.7478256)" x="198.1017" y="98.565216" width="65" height="25"></rect>
        </clipPath>
        <clipPath id="myClip2">
          <rect x="198.1017" y="98.565216" width="65" height="25"></rect>
        </clipPath>
      </defs>
      <polygon points="198.1017,98.565216 263.84082,98.565216 263.84082,72.817383 198.1017,72.817383" clip-path="url(#myClip)"
        fill="#FF0000" stroke-width="none"></polygon>
      <text transform="matrix(1,-0,-0,1,-0,-25.7478256)" clip-path="url(#myClip2)" font-family="Microsoft Sans Serif"
        font-size="8.25pt" fill="#000000">
        <tspan text-anchor="middle" x="230.6017" y="108.755646">Line 1</tspan>
        <tspan text-anchor="middle" x="230.6017" y="121.205841">A very very long line</tspan>
      </text>
      <rect transform="matrix(1,-0,-0,1,-0,-25.7478256)" x="198" y="98" width="65" height="25" fill="none" stroke="#0000FF"></rect>

    </svg>
  </div>
</body>

</html>
0 голосов
/ 18 октября 2018

Проблема может быть связана с тем, что путь клипа не применим к tspan .

Вы можете обойти это, применив отсечение кгруппа, содержащая text и polygon: 

 <g clip-path="url(#myClip)">
      <polygon /* ... */></polygon>
      <text transform="matrix(1,-0,-0,1,-0,-25.7478256)" font-family="Microsoft Sans Serif" font-size="8.25pt" fill="#000000">
        /* ... */
      </text>
  </g>

Обновленный фрагмент: 

<!DOCTYPE html>
<html>

<head>
  <title>Svg clipping issue</title>
</head>

<body>
  <div style="width:500px;height:180px;">
    <svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" height="100%"
      width="100%">
      <defs>
        <clipPath id="myClip">
          <rect transform="matrix(1,-0,-0,1,-0,-25.7478256)" x="198.1017" y="98.565216" width="65" height="25"></rect>
        </clipPath>
      </defs>
      <g clip-path="url(#myClip)">
          <polygon points="190.1017,120.565216 263.84082,98.565216 263.84082,72.817383 198.1017,72.817383"
        fill="#FF0000" stroke-width="none"></polygon>
          <text transform="matrix(1,-0,-0,1,-0,-25.7478256)" font-family="Microsoft Sans Serif" font-size="8.25pt" fill="#000000">
            <tspan text-anchor="middle" x="230.6017" y="108.755646">Line 1</tspan>
            <tspan text-anchor="middle" x="230.6017" y="121.205841" >A very very long line</tspan>
          </text>
      </g>
      <rect transform="matrix(1,-0,-0,1,-0,-25.7478256)" x="198" y="98" width="65" height="25" fill="none" stroke="#0000FF"></rect>

    </svg>
  </div>
</body>

</html>
...