page-break-inside для SVG g тэгов?

147

11 февраля 2019, 12:10

Можно ли предотвратить разрыв страницы при печати, чтобы <g> тэги svg не разрывались, а переносились на следующую страницу?

page-break-inside: avoid хорошо работает с div display: inline-block.
Но когда применяю такие же стили к g тэгу, то этот элемент разрывается, а не переносится на следующую страницу.

Answer 1

Формат SVG не поддерживает автоперенос слов, как это происходит в HTML

Но можно обойти это ограничение с помощью применения команды foreignObject, которая встраивает кусок кода HTML в SVG.

Пример взят из ссылки:

    
 
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> 
  <style> 
    polygon { fill: black } 
  
    div { 
      color: white; 
      font:18px serif; 
      height: 100%; 
      overflow: auto; 
    } 
  </style> 
  
  <polygon points="5,5 195,10 185,185 10,195" /> 
 
  <!-- Common use case: embed HTML text into SVG --> 
  <foreignObject x="20" y="20" width="160" height="160"> 
    <!-- 
      In the context of SVG embeded into HTML, the XHTML namespace could 
      be avoided, but it is mandatory in the context of an SVG document 
    --> 
    <div xmlns="http://www.w3.org/1999/xhtml"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Sed mollis mollis mi ut ultricies. Nullam magna ipsum, 
      porta vel dui convallis, rutrum imperdiet eros. Aliquam 
      erat volutpat. 
    </div> 
  </foreignObject> 
</svg>

также для переноса слов можно воспользоваться библиотекой D3js

Вот пример:

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
<body> 
<script src="//d3js.org/d3.v3.min.js"></script> 
<script> 
 
var svg = d3.select("body").append("svg") 
    .attr("width", 960) 
    .attr("height", 500); 
 
svg.append("foreignObject") 
    .attr("width", 480) 
    .attr("height", 500) 
  .append("xhtml:body") 
    .style("font", "14px 'Helvetica Neue'") 
    .html("<h1>An HTML Foreign Object in SVG</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu enim quam. Quisque nisi risus, sagittis quis tempor nec, aliquam eget neque. Nulla bibendum semper lorem non ullamcorper. Nulla non ligula lorem. Praesent porttitor, tellus nec suscipit aliquam, enim elit posuere lorem, at laoreet enim ligula sed tortor. Ut sodales, urna a aliquam semper, nibh diam gravida sapien, sit amet fermentum purus lacus eget massa. Donec ac arcu vel magna consequat pretium et vel ligula. Donec sit amet erat elit. Vivamus eu metus eget est hendrerit rutrum. Curabitur vitae orci et leo interdum egestas ut sit amet dui. In varius enim ut sem posuere in tristique metus ultrices.<p>Integer mollis massa at orci porta vestibulum. Pellentesque dignissim turpis ut tortor ultricies condimentum et quis nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer euismod lorem vulputate dui pharetra luctus. Sed vulputate, nunc quis porttitor scelerisque, dui est varius ipsum, eu blandit mauris nibh pellentesque tortor. Vivamus ultricies ante eget ipsum pulvinar ac tempor turpis mollis. Morbi tortor orci, euismod vel sagittis ac, lobortis nec est. Quisque euismod venenatis felis at dapibus. Vestibulum dignissim nulla ut nisi tristique porttitor. Proin et nunc id arcu cursus dapibus non quis libero. Nunc ligula mi, bibendum non mattis nec, luctus id neque. Suspendisse ut eros lacus. Praesent eget lacus eget risus congue vestibulum. Morbi tincidunt pulvinar lacus sed faucibus. Phasellus sed vestibulum sapien."); 
 
</script>