Question

我有一个显示SVG时间轴的网络应用。随着浏览器页面的增长/缩小，SVG正在使用ViewBox正确缩放时间轴。

SVG时间线正确地出现在firefox / chrome等中。当我从chrome直接打印到pdf时，它也正确地出现在chrome中。

在FIREFOX和CHROME中工作但不在PHANTOMJS ......

＆＃13;

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="overflow: hidden; position: relative; left: 0px;" data-hasqtip="26" viewBox="0 0 1138 130" aria-describedby="qtip-26">

＆＃13;

然而，当我使用phantomjs打印到pdf时，SVG时间轴根本不会出现。如果不是使用viewBox，我使用SVG时间轴的固定宽度和高度，它会在phantomjs pdf中正确显示。

PHANTOMJS的工作......

＆＃13 ;

＆＃13;

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="overflow: hidden; position: relative; left: 0px;" data-hasqtip="26" width="1100" height="900" aria-describedby="qtip-26">

＆＃13;

对于为什么会发生这种情况，有没有人有任何见解/提醒？有堆栈溢出，谷歌搜索问题，但没有具体的

提前感谢您提供任何帮助

大卫

ccprog，根据您的要求，下面是封闭的HTML等.viewBox =＆＃34; 0 0 718 130＆＃34;以下工作在chrome / FF，在phantomjs中不起作用

感谢任何抬头/提前帮助

＆＃13;

<!DOCTYPE html><!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--><!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8"> <![endif]--><!--[if IE 8]>
<html class="no-js lt-ie9"> <![endif]--><!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]--><head><style type="text/css">@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide{display:none !important;}ng\:form{display:block;}.ng-animate-block-transitions{transition:0s all!important;-webkit-transition:0s all!important;}.ng-hide-add-active,.ng-hide-remove{display:block!important;}</style>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Objective Arts</title>
    <meta name="viewport" content="width=device-width">

    <!-- iOS -->
    <link rel="apple-touch-icon" href="public/images/logo-white.png">
    <!--<link rel="apple-touch-startup-image" href="/startup.png">-->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <!-- Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <link rel="shortcut icon" sizes="196x196" href="images/logo-white.png">

    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <!-- build:css styles/vendor.css -->
    <!-- bower:css -->
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="bower_components/angular-motion/dist/angular-motion.css">
    <link rel="stylesheet" href="bower_components/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.css">
    <link rel="stylesheet" href="bower_components/angular-xeditable/dist/css/xeditable.css">
    <link rel="stylesheet" href="bower_components/bootstrap-additions/dist/bootstrap-additions.min.css">
    <link rel="stylesheet" href="bower_components/angular-growl-v2/build/angular-growl.css">
    <link rel="stylesheet" href="bower_components/c3/c3.css">
    <!-- endbower -->
    <!-- endbuild -->
    <!-- build:css({.tmp,app}) styles/main.css -->
    <link rel="stylesheet" href="styles/app.css">
    <link rel="stylesheet" href="styles/navbar.css">
    <link rel="stylesheet" href="styles/cfsPrint.css">
    <link rel="stylesheet" href="styles/assessmentNavigator.css">
    <link rel="stylesheet" href="styles/assessmentValidations.css">
    <link rel="stylesheet" href="styles/plan.css">
    <link rel="stylesheet" href="styles/abn_tree.css">
    <link rel="stylesheet" href="styles/flags.css">
    <link rel="stylesheet" href="styles/chronoline.css">
    <link rel="stylesheet" href="bower_components/qtip2/jquery.qtip.min.css">
    <!-- endbuild -->



<style type="text/css"></style></head>
<body ng-app="oaClientJs" style="" class="ng-scope">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a>
    to improve your experience.</p>
<![endif]-->



<div full-screen-loader="" class="ng-isolate-scope"><div id="fullscreenloaderoverlay" style="zoom: 1;" ng-show="visible" class="ng-hide">
</div>
<div id="fullscreenloadermessage" class="panel panel-default ng-hide" ng-show="visible">
    <div class="panel-body">
        <div class="text-centered">
            <h5 class="ng-binding">Loading Form<img src="images/loader.gif"></h5>
        </div>
    </div>
</div></div>



<div growl="" class="ng-isolate-scope"><div class="growl-container growl-fixed top-right" ng-class="wrapperClasses()"><!-- ngRepeat: message in growlMessages.directives[referenceId].messages --></div></div>

<!-- AngularJS controlled views -->
<div class="container fill">
    <!-- ngView:  --><div ng-view="" class="fill ng-scope"><style xmlns:page-break-inside="http://www.w3.org/1999/xhtml" class="ng-scope">

    .narrative {
        zoom: 0.8;
    }

    .nopadding {
        padding: 0 !important;
        margin: 0 !important;
    }

    .strength {
        background-color: #a0b2be !important;
        border: 1px solid #ddd !important;
        -webkit-print-color-adjust: exact;
    }

    .three {
        background-color: #be969c !important;
        border: 1px solid #ddd !important;
        -webkit-print-color-adjust: exact;
    }

    .two {
        background-color: #fae190 !important;
        border: 1px solid #ddd !important;
        -webkit-print-color-adjust: exact;
    }

    .one {
        background-color: #7abe77 !important;
        border: 1px solid #ddd !important;
        -webkit-print-color-adjust: exact;
    }

    .note {
        font-style: italic;
        font-size: 10px;
    }

    .date {
        font-style: italic;
        font-size: 10px;
        border: 1px solid lightgrey;
        -webkit-print-color-adjust: exact;
        align-content: center;
    }

    .unbreakable {
        display: inline-block;
    }

    .centered {
        text-align: center;
    }

    .sphere {
        height: 10px;
        width: 10px;
        border-radius: 50%;
        vertical-align: middle;
        display: inline-block;
        border: 1px solid black;
    }
    .printOnly{
        display:none;
    }

    @media print {
        html {
            zoom: .7;
        }
        .printOnly{
            display:block;
        }
    }
    
</style>

<!-- <test> start of form panel -->
<div id="detailHideContent" class="row hidden-print ng-scope">
<div id="realContent" class="panel panel-info">
    <div class="panel-heading"><span class="glyphicon glyphicon-list-alt"></span> <b class="ng-binding">Form - ....</b>
    </div>
    <div class="panel-body">
        <div class="row">
            <div class="col-md-2 col-sm-3 col-xs-6"><b>...:</b></div>
            <div class="col-md-3 col-sm-3 col-xs-6 ng-binding">ID10006</div>
            <div class="col-md-2 col-sm-3 col-xs-6"><b>....:</b></div>
            <div class="col-md-5 col-sm-3 col-xs-6 ng-binding">....</div>
        </div>
        <div class="row">
            <div class="col-md-2 col-sm-3 col-xs-6"><b>...</b></div>
            <div class="col-md-3 col-sm-3 col-xs-6"><a ng-href="#/clientTab/10006" class="ng-binding" href="#/clientTab/10006">....</a></div>
            <div class="col-md-2 col-sm-3 col-xs-6"><b>...</b></div>
            <div class="col-md-5 col-sm-3 col-xs-6 ng-binding">...</div>
        </div>
        <div class="row top-buffer">
            <div class="col-md-2 col-sm-3 col-xs-6"><b>...</b></div>
            <div class="col-md-3 col-sm-3 col-xs-6 ng-binding">12</div>
        </div>

        <div class="row">
            <div class="col-md-2 col-sm-3 col-xs-6"><b>...</b></div>
            <div class="col-md-5 col-sm-3 col-xs-6">
                <!-- ngIf: !isEditMode --><span ng-if="!isEditMode" class="ng-binding ng-scope">...</span><!-- end ngIf: !isEditMode -->
                <!-- ngIf: isEditMode -->
                <!-- ngIf: isEditMode -->
            </div>
        </div>

        <div class="row">
            <div class="col-md-2 col-sm-3 col-xs-6"><b>Org Unit:</b></div>
            <div class="col-md-10 col-sm-9 col-xs-6">
                <span ng-show="isEditMode &amp;&amp; availableOus.length == 0" class="ng-hide">No placements exist for the specified time range</span>
                <span ng-show="!isEditMode || availableOus.length == 1" class="ng-binding">WEFC - EIIS (36EWEI)</span>
                <select ng-show="isEditMode &amp;&amp; availableOus.length &gt; 1" class="form-control ng-pristine ng-valid ng-hide" ng-options="placement.nameCode for placement in availableOus track by placement.id" ng-model="selected.orgUnit"><option value="140" selected="selected">...</option></select>
            </div>
        </div>

        <div class="row ng-hide" ng-show="isEditMode &amp;&amp; regenerateRequired()">
            <div class="col-md-2 col-sm-3 col-xs-6">&nbsp;</div>
            <div class="col-md-10 col-sm-9 col-xs-6">
                <span>Regenration is required</span>
            </div>
        </div>

    </div>
</div>
</div>  <!-- end <div id="detailHideContent" class="row hidden-print"> -->
<!-- END OF FORM PANEL -->





<!-- START OF COURSE OF CARE PANEL -->
<div id="detailHideContent" class="row ng-scope">
<div id="formDetails" class="panel panel-default" ng-show="showDetails()">
    <div class="panel-heading"><span class="glyphicon"></span> <b>...</b>
    </div>
    <div class="panel-body">

    <div class="timeline-tgt ng-isolate-scope" reactive-chrono-line=""
chrono-data="chronoline"><div class="chronoline-wrapper 
chronoline-draggable"><div class="chronoline-canvas" style=""><svg version="1.1" 
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
data-hasqtip="7" viewBox="0 0 718 130" style="overflow: hidden; position: 
relative; left: 0px;"><desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 
0);">Created with Raphaël 2.2.0</desc><defs style="-webkit-tap-highlight-color: 
rgba(0, 0, 0, 0);"></defs><circle cx="493.62499999999994" cy="73.5" r="2.5" 
fill="#87ceeb" stroke="#87ceeb" stroke-width="2" class="chronoline-event" 
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><title 
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 
0);">Assessment</title></circle><circle cx="508.5833333333333" cy="73.5" r="2.5" 
fill="#87ceeb" stroke="#87ceeb" stroke-width="2" class="chronoline-event" 
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><title 
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 
0);">...</title></circle><circle cx="519.2678571428571" cy="73.5" r="2.5" 
fill="#87ceeb" stroke="#87ceeb" stroke-width="2" class="chronoline-event" 
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><title 
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 
0);">...</title></circle><circle cx="534.2261904761905" cy="73.5" r="2.5" 
fill="#00ffff" stroke="#00ffff" stroke-width="2" class="chronoline-event" 
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><title 
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 
0);">Collateral</title></circle><circle cx="549.1845238095237" cy="73.5" r="2.5" 
fill="#ff0000" stroke="#ff0000" stroke-width="2" class="chronoline-event" 
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><title 
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 
0);">...</title></circle><circle cx="564.1428571428571" cy="73.5" r="2.5" 
fill="#ff0000" stroke="#ff0000" stroke-width="2" class="chronoline-event" 
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><title 
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 
0);">...</title></circle><circle cx="579.1011904761905" cy="73.5" r="2.5" 
fill="#87ceeb" stroke="#87ceeb" stroke-width="2" class="chronoline-event" 
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><title 
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 
0);">...</title></circle><circle cx="534.2261904761905" cy="64.5" r="2.5" 
fill="#006400" stroke="#006400" stroke-width="2" class="chronoline-event" 
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><title 
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Plan Dev - 
MHS</title></circle><path fill="none" stroke="#b8b8b8" d="M0,80L718,80" 
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path><text x="15" 
y="118" text-anchor="middle" font-family="&quot;Arial&quot;" font-size="10px" 
stroke="none" fill="#000000" font-weight="bold" 
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; 
font-family: Arial; font-size: 10px; font-weight: bold;"><tspan dy="3.5" 
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">2017</tspan></text><path 
fill="none" stroke="#b8b8b8" d="M-36.32738095238095,80L-36.32738095238095,84" 
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path><text 
x="-36.32738095238095" y="94" text-anchor="middle" 
font-family="&quot;Arial&quot;" font-size="10px" stroke="none" fill="#000000" 
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; 
font-family: Arial; font-size: 10px;"><tspan dy="3.5" 
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">01</tspan></text><text 
x="15" y="106" text-anchor="middle" font-family="&quot;Arial&quot;" 
font-size="10px" stroke="none" fill="#000000" font-weight="bold" 
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; 
font-family: Arial; font-size: 10px; font-weight: bold;"><tspan dy="3.5" 
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">JAN</tspan></text><path 
fill="none" stroke="#b8b8b8" d="M-6.410714285714286,80L-6.410714285714286,84" 
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path><text 
x="-6.410714285714286" y="94" text-anchor="middle" 
font-family="&quot;Arial&quot;" font-size="10px" stroke="none" fill="#000000" 
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; 
font-family: Arial; font-size: 10px;"><tspan dy="3.5" 
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">15</tspan></text><path 
fill="none" stroke="#b8b8b8" d="M29.916666666666664,80L29.916666666666664,84" 
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path><text 
x="29.916666666666664" y="94" text-anchor="middle" 
font-family="&quot;Arial&quot;" font-size="10px" stroke="none" fill="#000000" 
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; 
font-family: Arial; font-size: 10px;"><tspan dy="3.5" 
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">01</tspan></text><text 
x="29.916666666666664" y="106" text-anchor="middle" 
font-family="&quot;Arial&quot;" font-size="10px" stroke="none" fill="#000000" 
font-weight="bold" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
text-anchor: middle; font-family: Arial; font-size: 10px; font-weight: 
bold;"><tspan dy="3.5" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 
0);">FEB</tspan></text><path fill="none" stroke="#b8b8b8" 
d="M59.83333333333333,80L59.83333333333333,84" 
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path>
<text 
x="707.3154761904761" y="94" text-anchor="middle" 
font-family="&quot;Arial&quot;" font-size="10px" stroke="none" fill="#000000" 
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; 
font-family: Arial; font-size: 10px;"><tspan dy="3.5" 
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 
0);">15</tspan></text></svg>
</div><div class="chronoline-left" 
style="margin-top: 40px; height: 40px; display: none;"><div 
class="chronoline-left-icon" style="margin-top: 12.5px;"></div></div><div 
class="chronoline-right" style="margin-top: 40px; height: 40px; display: 
none;"><div class="chronoline-right-icon" style="margin-top: 
12.5px;"></div></div></div></div>

＆＃13;

svg ELEMENT IN CHROME/FF USING viewBox

svg ELEMENT IN PHANTOMJS USING same viewBox

viewbox适用于chrome和firefox但不适用于phantomjs

0 个答案: