Javascript 如何将SVG与“一起使用”；猫头鹰转盘2“；

在“Owl转盘2”中排列图像和SVG时，我希望将SVG与图像匹配

图像总是方形的，但SVG稍长一点时，我无法解决这个问题

如果我扩大或缩小“.right”的宽度，SGV将变长，如下所示↓

如何使SVG成为正方形

样本：

HTML:

//滑块激活
$（文档）.ready（函数（）{
//插入样本
var img=``；//我将img包装在一个div中
var svg=getSvg（'image'）；
对于（变量i=0；i<10；i++）{
如果（（i%2）！=0）{
$（“#owl示例”）.append（img）；
}否则{
$（“#owl示例”）.append（svg）；
}
}
//猫头鹰转盘
const right=getSvg（'icon-cheveron-right'）；
const left=getSvg（'icon-cheveron-left'）；
$（“#猫头鹰示例”）.owlCarousel({
循环：false，
差额：10，
导航：是的，
自动高度：正确，
导航文本：[左，右]，
点：错，
responsiveBaseElement:$（“.right”）[0]，
响应：{
0: {
项目：2
},
340: {
项目：3
},
510: {
项目：4
},
680: {
项目：5
},
},
onInitialized:setOwlStageHeight，
onResized:setowlstagehight，
非翻译：setOwlStageHeight
});
函数setOwlStageHeight（事件）{
var maxHeight=0；
$（'.owl item.active'）。每个（函数（）{//循环遍历活动项
var thisHeight=parseInt（$（this.height（））；
maxHeight=（maxHeight>=此高度？maxHeight:此高度）；
});
}
//在正文中预编所有SVG
$（'body'）.prepend（prependtSvgs（））；
函数prependtSvgs（）{
返回`
`;
}
//获取单个SVG
函数getSvg（名称）{
return`\n`；//我将svg包装在一个div中
}
});
.flex{
显示器：flex；
}
.右，.左{
宽度：50%；
背景：橙色；
利润率：10px；
位置：相对位置；
}
.icon.icon-image{
宽度：100%；
身高：100%；
背景：红色；
}

.左

.对

我尝试添加“important”，但无法添加。→ 将svg封装在一个div中。您将获得所需的输出。看起来不错！接近！太近了！你就不能修错边距吗？我想将图像和SVG之间的距离调整为10px。我编辑了我的答案。请查收。如果它不存在问题。请调查一下。谢谢嗯，事情进展不顺利。我会做更多的研究。你的问题与猫头鹰旋转木马无关。默认情况下，SVG的宽度为300px，高度为150px。如果修改宽度，除非更改，否则高度将保持在150px。
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" type="text/css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<div class="flex">
  <div class="left">
    <p>.left</p>
  </div>
  <div class="right">
    <p>.right</p>
    <div id="owl-example" class="owl-carousel">
    </div>
  </div>  
</div>

// Slider activation
$(document).ready(function() {

    // Insert samples
    var img = `<div><img src="https://placehold.jp/150x150.png"></div>`;
    var svg = getSvg('image'); 
    for (var i = 0;  i < 10;  i++) {
        if( ( i % 2 ) != 0 ) {
            $("#owl-example").append(img);
        }else{
            $("#owl-example").append(svg);
        }
    }

    // owlCarousel
    const right = getSvg('icon-cheveron-right'); 
    const left  = getSvg('icon-cheveron-left');
    $("#owl-example").owlCarousel({
        loop: false,
        margin: 10,
        nav: true,
        autoHeight: true,
        navText: [left, right],    
        dots: false,
        responsiveBaseElement:$(".right")[0],
        responsive  :{
            0:{
                items:2
            },
            340:{
                items:3
            },        
            510:{
                items:4
            },
            680:{
                items:5
            },        
        }
    });    

});

// Prepend all SVG in body
$('body').prepend( prependtSvgs() );    
function prependtSvgs(){
    return `
    <svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs>  
            <!-- 画像 -->
            <symbol id="icon-image" viewBox="0 0 24 24">
            <path d="M5 2c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v14c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h14c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-14c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879zM11 8.5c0-0.69-0.281-1.316-0.732-1.768s-1.078-0.732-1.768-0.732-1.316 0.281-1.768 0.732-0.732 1.078-0.732 1.768 0.281 1.316 0.732 1.768 1.078 0.732 1.768 0.732 1.316-0.281 1.768-0.732 0.732-1.078 0.732-1.768zM9 8.5c0 0.138-0.055 0.262-0.146 0.354s-0.216 0.146-0.354 0.146-0.262-0.055-0.354-0.146-0.146-0.216-0.146-0.354 0.055-0.262 0.146-0.354 0.216-0.146 0.354-0.146 0.262 0.055 0.354 0.146 0.146 0.216 0.146 0.354zM7.414 20l8.586-8.586 4 4v3.586c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293zM20 12.586l-3.293-3.293c-0.391-0.391-1.024-0.391-1.414 0l-10.644 10.644c-0.135-0.050-0.255-0.129-0.356-0.23-0.182-0.182-0.293-0.431-0.293-0.707v-14c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293h14c0.276 0 0.525 0.111 0.707 0.293s0.293 0.431 0.293 0.707z"></path>
            </symbol>
            <!-- 矢印 -->
            <symbol id="icon-cheveron-right" viewBox="0 0 20 20">
            <path d="M12.95 10.707l0.707-0.707-5.657-5.657-1.414 1.414 4.242 4.243-4.242 4.243 1.414 1.414 4.95-4.95z"></path>
            </symbol>
            <symbol id="icon-cheveron-left" viewBox="0 0 20 20">
            <path d="M7.050 9.293l-0.707 0.707 5.657 5.657 1.414-1.414-4.242-4.243 4.242-4.243-1.414-1.414z"></path>
            </symbol>
        </defs>
    </svg>
    `;        
}

// Get single SVG
function getSvg( name ){
    return `<svg class="icon icon-${name}"><use xlink:href="#icon-${name}"></use></svg>\n`;
}

.flex {
    display: flex;
}
.right, .left {
    width: 50%;
    background: orange;
    margin: 10px;
    position: relative;
}
.icon.icon-image {
    width: 100%;
    height: 100%;
    background: red;
}