Question

我正在为大学部门创建一个自动事件显示系统，该系统根据SQL数据创建海报。我们的想法是创建海报的SVG和PDF文件，以便PDF可以用于打印，SVG可以显示在自动更新的网络连接数字标牌显示屏上（OK，OK，墙上的电视）。

我已经将SVG文件格式化为我想要的格式，但是当我尝试使用滑块库来显示.svg文件时，某些元素的格式变得混乱。我已经将此缩小到使用IMG标签显示的SVG无法正常工作的事实。我把文件包含在自己的DIV中，因为它是一个HTML5项目;如果我将'u = image'移动到DIV标签，转换工作正常，但转换结束时SVG会中断（文本原点似乎都重置为左上角）。

只是想知道是否有办法这样做。

<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 764px; height: 1080px; overflow: hidden;">

<?php 
    // DATA FROM SEMINARS_DETAIL
    $query = "SELECT * FROM `seminars_detail` LIMIT 4"; //Date >= NOW()
    $result = $mysqli->query($query) or die($mysqli->error.__LINE__);

    if($result->num_rows > 0) {
            while($row = $result->fetch_assoc()) {      
            $sem_id = $row["sem_id"];
            $file = "../images/posters/$sem_id.svg";
    //SVG not working properly. 
            echo "<div>";
            echo "<img u=\"img\" src=\"$file_th\" />";          
            echo "</div>";

    //Compared with...
    //Transition works, but text origin shifts when transition finishes.
            echo "<div u=\"image\">"; 
            include $file;
            echo "</div>";      
        }
    } else {
        echo 'NO RESULTS';  
    }
?>
</div>

Answer 1

首先，请停用幻灯片。

另外，请尝试使用svg作为背景图片。

<div u="slides" ...>
    <div style="background-image: url(l.svg);"></div>
    <div style="background-image: url(2.svg);"></div>
    <div style="background-image: url(3.svg);"></div>
</div>

是否可以在例如使用JSSOR滑块DIV而不是IMG对象？

1 个答案: