Question

我有以下SVG使用mask元素屏蔽图像和视频，但仅在视频开始播放然后停止时才显示：

    <div id="svg-container">
    <svg baseProfile="tiny" height="100%" xmlns="http://www.w3.org/2000/svg"
         xmlns:ev="http://www.w3.org/2001/xml-events"
         xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 600 300" class="svg-defs">

        <!-- Symbol with text -->
        <symbol id="s-text">
            <text id="heroText" text-anchor="middle"
                  x="50%"
                  y="50%"
                  dy=".35em"
                  class="hero-text">
                Couture Book
            </text>
        </symbol>

        <!-- Mask with text -->
        <mask id="m-text"
              maskunits="userSpaceOnUse"
              maskcontentunits="userSpaceOnUse">

            <rect
                width="100%"
                height="100%"
                class="mask__shape">
            </rect>
            <use xlink:href="#s-text"
                 class="mask__text">
            </use>

        </mask>
    </svg>

    <div class="box-with-text">

        <!-- Container for video -->
        <div id="text-fill-container" class="text-fill-container">
            <img class="text-fill-image" src="/Content/images/home/hero/hero-logo-text-fill.png" />
            <video id="heroVideo" class="text-fill-video hidden" preload="none">
                <source src="/Content/video/behind_scenes.mp4?t=@DateTime.Now.Ticks" type="video/mp4">
            </video>
        </div>

        <!-- Visible SVG -->
        <svg baseProfile="tiny" height="100%" xmlns="http://www.w3.org/2000/svg"
             xmlns:ev="http://www.w3.org/2001/xml-events"
             xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 600 300"
             class="svg-inverted-mask">
            <rect
                width="100%"
                height="100%"
                mask="url(#m-text)"
                class="shape--fill" />
            <use xlink:href="#s-text"
                 class="text--transparent">
            </use>
        </svg>
    </div>
</div>
<!--//svg-->

以下是HTML5视频开始播放之前的着陆/主页的屏幕截图：

这是播放视频然后停止播放10秒后的屏幕截图，虽然停止视频的时间无关紧要：

它有点微妙，但如果你点击每个图像放大，你可以清楚地看到第二个截图中的模糊。文字，如“巴西地球”等字样模糊，几乎像我的SVG的某些部分“泄漏”到SVG中没有的文本。

我确信这与SVG或SVG蒙版的高度和宽度或视口高度和宽度有关，但我找不到它。

我正在使用一些jQuery来隐藏和显示基于用户点击我的播放按钮的HTML元素：

  $('#btnPlay').on('click', function () {
            //if (!(video.readyState >= video.HAVE_FUTURE_DATA))
            //    return;

            $('#btnStop').show();
            $('#text-fill-container').removeClass('text-fill-container');
            $('.svg-inverted-mask').hide();
            $('.hero-caption-container').hide('slow');
            $('.text-fill-image').addClass('hidden');
            $('.text-fill-video').removeClass('hidden');

            video.play();
        });


   $('#btnStop').on('click', function () {
            video.pause();
            videoStopUpdateUI();
        });

 function videoStopUpdateUI() {
        $('#hero').show('slow');
        $('body').removeClass();
        $('#btnStop').hide();
        $('#text-fill-container').addClass('text-fill-container');
        $('.svg-inverted-mask').show();
        $('.hero-caption-container').show('fast');
        $('#btn-side-menu-slide-left').show();
        $('#btn-back').hide();
        $('.hero-secondary').hide();
    }

当页面加载时，SVG中的文本掩码后面会显示静态图像。

当用户开始播放视频时，显示视频并隐藏静态图像，当用户停止视频时，文本掩码覆盖视频停止的帧，而不是使用使用的静态图像当页面加载时。

在Chrome中，一切正常，但在Safari 9中，El Capitan，当视频停止时，文本，甚至在SVG中都没有奇怪的模糊。

你可以在这里看到这个： http://beta2.cmykpress.com/

视频停止播放后，右下角的播放按钮位于底部，中间和停止按钮的X。

带有文本屏蔽功能的SVG HTML5视频在Safari

0 个答案: