Question

我正在尝试使用SVG形状创建一个手风琴，我正在使用SVG，因为我的部分没有常规形状。

我使用SVG clipPath

创建了这个形状

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 1276.4 270" style="enable-background:new 0 0 1276.4 270;">
<style type="text/css">
    .st0{display:none;clip-path:url(#XMLID_111_);}
    .st1{display:inline;}
</style>
<g id="XMLID_5_">
    <defs>
        <path id="XMLID_1_" d="M414.5,2.2c-27.6,1.7-55.2,2.9-82.7,0.9c-10.7,0.4-21.4,0.9-32.1,1.5c-33.9,1.8-67.8,5-101.7,5.8
            C163.7,11.2,129.3,10.1,95,9c-31.7-1-63.3-2.1-95-1.6v126.3l0.2,121.8c160.1-23.4,321.4-2.1,482.2,4.8c86.7,3.7,173.1,0,259.5-7.6
            c42.7-3.7,85.1-9.3,128-7.3c44.5,2.1,88.7,8.5,132.8,14.5c25,3.3,50,6.4,75.2,8.3c27.5,2,55,2,82.6,1.5c39-0.7,78-2.6,116.9-6.1
            V137.8l-0.2-126.1c-7.6,0.2-15.3,0.1-23-0.3c-20.8-1-41.6-3-62.5-3.6c-43.4-1.3-86.8-0.8-130.2-2c-43.7-1.1-87.3-3.1-131-2.3
            c-43.1,0.8-86.1,3.2-129.2,4.7c-43.6,1.5-87.1,1.8-130.7-0.1c-43.7-1.9-87.2-5-130.9-6.9C521.9,0.4,504.1,0,486.4,0
            C462.5,0,438.5,0.7,414.5,2.2"/>
    </defs>
    <use xlink:href="#XMLID_1_"  style="overflow:visible;fill:#525252;"/>
    <clipPath id="shape_1">
        <use xlink:href="#XMLID_1_"  style="overflow:visible;"/>
    </clipPath>
</g>
<image clip-path="url(#shape_1)" width="2000" height="1700" xlink:href="dummy_url.jpg" preserveAspectRatio="xMidYMin slice"></image>
</svg>

当您点击某个部分时，它应该在高度上展开。我的问题是我不能在不破坏背景图像比例的情况下改变SVG的高度。如果在这种情况下有替代方法可以使用SVG，我会对它持开放态度，非常感谢。

Answer 1

您是否考虑将图像用作svg元素的 fill 而不是 image ？

＆＃xA;＆＃xA;

此类模式的一些垃圾代码如下所示：

＆＃xA;＆＃xA;

 ＆lt; rect x =“ -  50”width =“100％”height =“100％”style =“max-width = 950px”fill =“url（＃your-id）”rx =“6”ry =“6”id = “背景面板”/＆GT;＆＃XA; ＆LT; DEFS＆GT;＆＃XA; ＆lt; pattern id =“your-id”patternUnits =“userSpaceOnUse”x =“120”y =“170”width =“650”height =“547”＆gt;＆＃xA; ＆lt; image xlink：href =“dummy_url.jpg”width =“650”height =“547”opacity =“1”/＆gt;＆＃xA; ＆LT; /图案＆GT;＆＃XA; ＆lt; / defs＆gt;＆＃xA;

＆＃xA;＆＃xA;

这样你可以改变路径的大小（在这种情况下， rect ）并且它不会改变图像的大小/比例，它只会显示更多。

＆＃XA;

Answer 2

我设法通过创建一个svg来实现：

＆＃13;

<?php

header("Content-type: application/json");

include ('wp-load.php');


$loop = new WP_Query(array( 'post_status' => 'publish', 'post_type' => 'post'));
if($loop->have_posts()) : while($loop->have_posts()) : $loop->the_post();
    $posts[] = array(
        'id' => $post->ID,
        'post_title' => $post->post_title,
        'post_content' => $post->post_content,
        'guid' => $post->guid,

        'thumbnail' => (has_post_thumbnail() ? get_the_post_thumbnail_url() : ''),
        'cats' => the_category_ID(),

    );
endwhile; endif;
echo json_encode(array('ads' => $posts));

?>

＆＃13;

我为每年创建了一个包含图像容器的div

＆＃13;

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   viewBox="0 0 2315.2 989" style="enable-background:new 0 0 2315.2 989;" xml:space="preserve">
<style type="text/css">
  .st0{clip-path:url(#XMLID_45_);fill-rule:evenodd;clip-rule:evenodd;fill:#913B58;}
</style>
<g id="XMLID_30_">
  <g id="XMLID_31_">
    <defs>
      <rect id="XMLID_2_" x="1.5" width="2313.9" height="987.8"/>
    </defs>
    <clipPath id="shape_1">
      <use xlink:href="#XMLID_1_"  style="overflow:visible;"/>
    </clipPath>
    <path id="XMLID_1_" class="st0" d="M875.1,970.2c157.1,6.7,313.5-0.1,470-13.8c77.3-6.8,154.1-16.8,231.8-13.2
      c80.6,3.7,160.6,15.5,240.5,26.3c45.2,6,90.6,11.7,136.1,15c49.8,3.7,99.7,3.7,149.6,2.8c70.8-1.3,141.6-4.7,212.1-11.1l-0.4-955
      c-13.8,0.3-27.7,0.1-41.7-0.5c-37.7-1.8-75.4-5.5-113.1-6.6c-78.6-2.3-157.3-1.5-235.9-3.6c-79.1-2.1-158.2-5.6-237.3-4.2
      c-78,1.4-155.9,5.7-233.9,8.5c-78.9,2.8-157.7,3.2-236.6-0.2c-79.1-3.4-158-9.1-237-12.5c-75.9-3.3-151-2.8-226.8,1.9
      c-50,3.1-100.1,5.2-149.8,1.6c-19.4,0.8-38.7,1.7-58.1,2.7c-61.4,3.3-122.8,9-184.2,10.5c-119.7,2.9-239.3-7.3-359-5.4l0.4,948.1
      C291.8,919.2,583.9,957.8,875.1,970.2"/>
  </g>
</g>
</svg>

＆＃13;

然后我将svg指定为CSS

中图像容器的clip-path属性

＆＃13;

<div class="year">
            <div class="image-container" style="background-image: url(<?php the_sub_field('image') ?>);"></div>
</div>

＆＃13;

＆＃13; 这几年我部分重叠，所以不是试图扩大年份容器，而是在使用margin-top点击之后的所有年份我只是滑下来：

＆＃13;

.image-container{
	clip-path: url(#shape_1);
	background-size: cover;
	background-repeat: no-repeat;
	padding-top: 40%;
   	background-position-y: 27%;
    position: relative;
 }

＆＃13;

SVG的动画高度，不改变背景图像的比例

2 个答案: